使用 Typescript 和 React Memo 的复合组件模式答案

【问题标题】：Compound components pattern with Typescript and React Memo使用 Typescript 和 React Memo 的复合组件模式
【发布时间】：2022-08-22 17:31:45
【问题描述】：

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

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;

我该怎么做？

您在初始化变量后添加了 Child 属性，这导致了错误。但我不确定为什么它在第一种情况下工作正常。您可以简单地使用 Child? 使 Child 属性成为可选： typeof SearchCardChild;
是的，使其可选将解决这个确切的错误，但尝试使用 <SearchCard.Child /> 将返回 JSX element type \'SearchCard.Child\' does not have any construct or call signatures.

标签： reactjs typescript

【解决方案1】：

interface ParentComposition {
    Child: typeof SearchCardChild;
}

interface SearchCardProps {}

export const SearchCard: React.FC<SearchCardProps> & ParentComposition = ({}) => {
    const memoizedChildren = React.useMemo(() => children, []);

    return ... {memoizedChildren} ...;
};

const SearchCardChild: React.FC = () => {
    return ...
}

SearchCard.Child = SearchCardChild;

【讨论】：