typescript 在JSX中使用ReactType

yquaqz18  于 2023-03-19  发布在  TypeScript
关注(0)|答案(3)|浏览(127)

我有一个关于JSX和Typescript集成的问题。给定以下代码:

interface Props {
    component?: React.ReactType
}

class MyComponent extends React.Component<Props, void> {
    render() {
      var Comp = this.props.component
      return (<Comp></Comp>)
    }
}

我得到:JSX element type 'Comp' does not have any construct or call signatures.
类似的代码可以在Javascript中正常工作,其中component具有来自react-prop-types的prop验证器elementType,因此它可以是字符串或组件类。

a1o7rhls

a1o7rhls1#

如果你看一下react类型的定义,你会发现你有一个3种不同类型的联合类型,其中一种是字符串。这就是为什么你会有这样的问题。尝试用React.ComponentClass替换React.ReactType。

jgovgodb

jgovgodb2#

你是如何创建你要传入的组件的?如果你像这样创建它,它应该工作:

interface MyProps {
    component?: React.ReactType;
}

class TestComponent extends React.Component<void, void> {
    render() {
        return <div>Test</div>;
    }
}

class MyComponent extends React.Component<MyProps, void> {
    render() {
        const Comp = this.props.component
        return (<Comp/>);
    }
}

class Parent extends React.Component<{}, {}> {
    render() {
       return (
          <MyComponent component={TestComponent}></MyComponent>
       )
    }
}

你也可以将html元素作为字符串传递(例如“div”),但我不确定这是否是你想要做的。

wbgh16ku

wbgh16ku3#

我将给予你一个使用函数组件的例子:

type YourProps = { count: number };
type Props = {
  component: ElementType<YourProps>
}

function Parent({component}: Props): ReactElement {

  return (
    <>
      {React.createElement(component, {count: 1})}
    </>
  );
}

function Child({count}: YourProps) {
  return <>Count: {count}</>
}

function Root() {
  return <><Parent component={Child}/></>
}

在本例中,您将委托父组件的元素构造,它将通过使用React API - createElement并将props传递给它来本机创建。

相关问题