0

我是 Typescript 的新手，我不知道如何用它正确输入 HOC。我已经花了一整天的时间来弄清楚它没有任何成功。我有一个非常基本的代码片段BaseComponent和一个简单的HOC. 出于某种原因，在创建 BaseComponent 时，我收到 Typescript 错误：

Type '{ total: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'. Property 'total' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'.

知道如何正确设置道具类型吗？

基础组件：

interface SummaryProps {
    sum: number;
}

class Summary extends React.Component<SummaryProps> {
    render() {
        return (
            <div>{this.props.sum}</div>
        );
    }
}

export default withMyHOC(Summary);

特设：

interface WithMyHOCProps {
    total: number;
}

const withMyHOC = (WrappedComponent: React.ComponentType<any>): React.ComponentClass => {
    return class extends React.Component<WithMyHOCProps> {
        render() {
            return (
                <WrappedComponent
                    {...this.props}
                    sum={this.props.total + 1}
                />
            );
        }
    };
};

export default withMyHOC;

初始化：

import Summary from 'features/Summary.tsx';

<Summary total={5} /> // here I am getting Typescript error described above
4

1 回答 1

0

通过传递{...this.props}，您也将所有道具传递withMyHOC给底层组件。这total也包括，但Summary没有道具“总计”。

所以 oyu 也需要为孩子添加所有的道具。

于 2020-10-22T15:17:24.997 回答