使用高阶组件时使用 TypeScript 定义道具答案

【问题标题】：defining props with TypeScript when using higher order component使用高阶组件时使用 TypeScript 定义道具
【发布时间】：2018-02-05 02:08:09
【问题描述】：

我有一个组件需要从父级（使用 PropA）和 HOC（使用 PropB）注入

export interface PropsA extends PropsB {
    propA: string;
}

class SomeComponent extends React.PureComponent<PropsA> {
    render(){
        return (
            <div>
                {this.props.propA}
                {this.props.propB}
            </div>
        );
    }
}

export default withPropsB(SomeComponent);


export interface PropsB {
    propB: string;
}

这就是我们用 HOC 注入它的方式：

export const withPropsB = (Component: any) => {
    class EnhancedWithProsB extends React.Component<PropsB> {
        render(){
            return <Component {...this.props}/>;
        }
    }

    const mapStateToProps = (state: any) => ({
        propB: "propB"
    });

    return connect(mapStateToProps)(EnhancedWithProsB);
};

客户这样使用：

class Wrapper extends React.Component {
    render(){
        return <SomeComponent propA="propA" />;
    }
}

我收到错误消息，提示“'IntrinsicAttributes & IntrinsicClassAttributes, ComponentState>> & ...' 类型上不存在属性 'propA'。”

withPropsB 方法应该返回什么类型才能使这个错误消失？

【问题讨论】：

标签： reactjs typescript redux

【解决方案1】：

您需要从React.Component 派生EnhancedWithProsB，并使用与传递的组件相同的道具（在您的情况下为PropsA）。一个通用的方法是：

export const withPropsB = <T extends PropsB>(Component: new(... p: any[])=>  React.PureComponent<T>) => {
    class EnhancedWithProsB extends React.Component<T> {
        render(){
            return <Component {...this.props}/>;
        }
    }

    const mapStateToProps = (state: any) => ({
        propB: "propB"
    });

    return connect(mapStateToProps)(EnhancedWithProsB);
};

【讨论】：