用Typescript和React Memo组合组件模式

Question

我使用复合组件，因此将子组件分配给父组件本身。它通常看起来像这样：

interface ParentComposition {
Child: typeof SearchCardChild;
}
interface SearchCardProps {}
export const SearchCard: React.FC<SearchCardProps> & ParentComposition = ({}) => {
return ...;
};
const SearchCardChild: React.FC = () => {
return ...
}
SearchCard.Child = SearchCardChild;

我正试图使用React.memo将相同的模式应用于父级，但我一直收到以下错误：

类型"NamedExoticComponent"中缺少属性"Child"，但类型"ParentComposition"中需要该属性。

interface ParentComposition {
Child: typeof SearchCardChild;
}
interface SearchCardProps {}
export const SearchCard: NamedExoticComponent<SearchCardProps> & ParentComposition = React.memo(({}) => {
return ...;
});
const SearchCardChild: React.FC = () => {
return ...
}
SearchCard.Child = SearchCardChild;

我该怎么做？

Answer 1

组件的组成必须在内存化之后，否则BaseForm中的property.displayName将导致错误

interface IFormProps extends HTMLAttributes<HTMLDivElement> {}
interface MemoizedFormCompose {
Item: typeof Item;
}
const BaseForm: FC<IFormProps> = ({ children, className, ...props }) => (
<div {...props}>
{children}
</div>
);
const MemoizedForm = React.memo(BaseForm) as NamedExoticComponent<IFormProps> & MemoizedFormCompose;
MemoizedForm.Item = Item;
export const Form = MemoizedForm;