Question

我想创建可插入的React组件。组件通过其类名解析，因此我很自然地被泛型所吸引;但这似乎不起作用。

class Div<P, S, C extends React.Component> extends React.Component<void, void> {

    render() {
        return (
            <div>
                <C /> // error: Cannot find name 'C'.
            </div>
        );
    }
}

是否有其他方法可以编写可插入的TypeScript组件？

Answer 1

使用泛型不可能做到这一点，尽管不清楚为什么要使用泛型来解决这个问题，而不是仅仅使用普通的props机制来提供内部元素。

原因是类型被擦除，因此您需要向类提供类构造函数，以便它具有对要在C中实例化的值的引用。但除了JSX props（或state或您需要做的任何事情）之外，没有其他地方可以传递该值。

换句话说，而不是写

// not sure what you would expect the syntax to be?
const elem = <Div<Foo> ... />;

你应该写

const elem = <Div myChild={Foo} />

并在render中将其消费为

const Child = this.props.myChild;
return <div><Child /></div>;

顺便说一句，正确的约束是new() => React.Component而不是React.Component - 请记住，您在JSX（<Div>等）中编写的内容是构造函数< / em>用于类，而不是类实例。

Answer 2

由于TypeScript类型已被删除，因此该问题的答案仍然存在，但是从Typescript 2.9开始，generic JSX components are supported

提供的示例是：

class GenericComponent<P> extends React.Component<P> {
    internalProp: P;
}
type Props = { a: number; b: string; };

const x = <GenericComponent<Props> a={10} b="hi"/>; // OK
const y = <GenericComponent<Props> a={10} b={20} />; // Error

对于那些通过问题标题结尾的人来说，这只是值得一提的。

TypeScript / JSX中的Generic React组件？

2 个答案: