Question

如何正确注释接受amount或字符串作为html标记的组件道具？

例如，我有一个可以使用自定义组件的组件（包括Component，div等html标记。它是这样写的：

如果我将另一个组件作为

interface MyComponentProps<T> {
    comp: React.ComponentType<T>
}

function MyComponent<T>({ comp: Component }: MyComponentProps<T>) {
  return <Component />
}

道具传递给comp，那么

Typescript并不会抱怨：

MyComponent

但是，当我通过这样的标准html标签时：

function Wrapper() {
    return <div />
}

function render() {
    return <MyComponent comp={Wrapper} />
}

打字稿编译器投诉：

function render() {
  return <MyComponent comp="div"/>
}

那么，如何在不使用Type '{ comp: "div"; }' is not assignable to type 'IntrinsicAttributes & MyComponentProps<{}>'. Type '{ comp: "div"; }' is not assignable to type 'MyComponentProps<{}>'. Types of property 'comp' are incompatible. Type '"div"' is not assignable to type 'ComponentType<{}>'.类型的情况下对MyComponent之类的组件进行注释？

Answer 1

正如Dragomir所提到的 - 联盟类型是要走的路。下面的代码编译得很好。

interface MyComponentProps<T>
{
    comp: React.ComponentType<T> | string;
}

function MyComponent<T>({ comp: Component }: MyComponentProps<T>)
{
    return <Component />;
}

function render()
{
    return <MyComponent comp={Wrapper}/>;
}

function render2()
{
    return <MyComponent comp="div"/>;
}

如何正确注释可以接受Component或string作为html标签的组件道具？

1 个答案: