TypeScript/JSX 中的通用 React 组件？

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> 等）是类的构造函数，不是类实例。

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

只是认为对于通过问题标题结束的人来说值得一提。