使用带有 HOC 的组件时不需要道具

Question

我对 HOC 和 typescript 有疑问。 编译器需要传递从 HOC 接收的值。

使用 HOC 的组件：

function Coupon(props: WithAlertProps): JSX.Element {
 return <p>test {props.error}</p>
}
export default withAlert(Coupon);

特设：

export interface WithAlertProps {
    error: string;
}

const withAlert = <P extends unknown>(
    Component: React.ComponentType<P>
): React.FC<P & WithAlertProps> => (props) => {
    return (
            <Component {...props} error={"sample error"} />
    );
};

export default withAlert;

当我尝试使用组件时，我收到消息：Type '{}' is missing the following properties from type 'WithAlertProps': error

那么如何通知 typescript 它有来自 HOC 的错误值呢？

Answer 1

你有错位类型。 您的withAlert hoc 接收带有P & WithAlertProps道具的组件并返回接收P道具的组件。

const withAlert = <P extends unknown>(
    Component: React.ComponentType<P & WithAlertProps>
): React.FC<P> => (props) => {
    return (
        <Component {...props} error={"sample error"} />
    );
};

TS游乐场