React.memo结合TypeScript实现复合组件模式报错解决方案

错误原因 #

React.memo 返回的 NamedExoticComponent 实例初始状态下并不包含你定义的 Child 属性，但你声明的联合类型 NamedExoticComponent<SearchCardProps> & ParentComposition 要求必须存在该属性，因此 TypeScript 会抛出属性缺失的错误。

解决方案 #

方案一：先创建 memo 组件，挂载子组件后再断言类型 #

interface ParentComposition {
    Child: typeof SearchCardChild;
}

interface SearchCardProps {}

// 先定义子组件
const SearchCardChild: React.FC = () => {
    return <div>Child Component</div>;
};

// 创建 memo 化的父组件，暂不指定完整类型
const MemoizedSearchCard = React.memo(({}: SearchCardProps) => {
    return <div>Parent Component</div>;
});

// 挂载子组件到父组件上
MemoizedSearchCard.Child = SearchCardChild;

// 断言为目标联合类型并导出
export const SearchCard = MemoizedSearchCard as NamedExoticComponent<SearchCardProps> & ParentComposition;

方案二：直接断言类型后挂载子组件 #

interface ParentComposition {
    Child: typeof SearchCardChild;
}

interface SearchCardProps {}

const SearchCardChild: React.FC = () => {
    return <div>Child Component</div>;
};

// 创建 memo 组件并直接断言为目标类型
export const SearchCard = React.memo(({}: SearchCardProps) => {
    return <div>Parent Component</div>;
}) as NamedExoticComponent<SearchCardProps> & ParentComposition;

// 挂载子组件
SearchCard.Child = SearchCardChild;

方案三：用 Object.assign 合并组件与子组件（自动推断类型） #

这种方式无需手动声明联合类型，TypeScript 会自动识别合并后的组件类型：

interface SearchCardProps {}

const SearchCardChild: React.FC = () => {
    return <div>Child Component</div>;
};

const MemoizedSearchCard = React.memo(({}: SearchCardProps) => {
    return <div>Parent Component</div>;
});

// 合并 memo 组件与子组件，自动推断包含 Child 的类型
export const SearchCard = Object.assign(MemoizedSearchCard, {
    Child: SearchCardChild
});

内容的提问来源于stack exchange，提问作者Johnny Kontrolletti