reactjs – 使用TypeScript为React高阶组件键入注释

我正在使用Typescript为我的React项目编写一个高阶组件,它基本上是一个函数接受一个React组件作为参数并返回一个包装它的新组件. @H_404_1@然而,由于它按预期工作,TS抱怨“返回类型的导出函数已经或正在使用私有名称”匿名类“.

@H_404_1@有问题的功能：

export default function wrapperFunc <Props,State> (
    WrappedComponent: typeof React.Component,) {
    return class extends React.Component<Props & State,{}> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

@H_404_1@错误是合理的,因为返回的包装函数类没有导出,而其他模块导入此函数无法知道返回值是什么.但我无法在此函数之外声明返回类,因为它需要将组件传递包装到外部函数.

@H_404_1@如下所示,显式指定React.Component的返回类型类型的试验可以抑制此错误.

@H_404_1@有明确返回类型的函数：

export default function wrapperFunc <Props,): typeof React.Component {                     // <== Added this
    return class extends React.Component<Props & State,{}> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

@H_404_1@但是,我不确定这种方法的有效性.它是否被认为是解决TypeScript中此特定错误的正确方法？ (或者我是否在其他地方制造了意想不到的副作用？或者更好的方法是这样做？)

@H_404_1@(编辑)根据丹尼尔的建议改变引用的代码.

Type annotation for React Higher Order Component using TypeScript @H_404_1@React.Component的返回类型类型是真实的,但对包装组件的用户不是很有帮助.它会丢弃有关组件接受哪些道具的信息.

@H_404_1@React类型为此目的提供了一个方便的类型,React.ComponentClass.它是类的类型,而不是从该类创建的组件的类型：

React.ComponentClass<Props>

@H_404_1@(请注意,未提及状态类型,因为它是内部细节).

@H_404_1@在你的情况下：

export default function wrapperFunc <Props,State,CompState> (
    WrappedComponent: typeof React.Component,): React.ComponentClass<Props & State> {
    return class extends React.Component<Props & State,CompState> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

@H_404_1@但是,您使用WrappedComponent参数执行相同的操作.根据你在渲染中如何使用它,我猜它也应该声明：

WrappedComponent: React.ComponentClass<Props & State>,

@H_404_1@但这是疯狂猜测,因为我认为这不是完整的功能(不使用CompState,并且Props& State也可能是单个类型参数,因为它总是出现在该组合中).

原文链接：https://www.f2er.com/react/301279.html

reactjs – 使用TypeScript为React高阶组件键入注释

猜你在找的React相关文章