typescript 在JSX中使用ReactType

yquaqz18 于 2023-03-19 发布在 TypeScript

关注(0)|答案(3)|浏览(128)

我有一个关于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，因此它可以是字符串或组件类。

typescript

来源：https://stackoverflow.com/questions/37494822/using-reacttype-with-jsx

3条答案

按热度按时间

a1o7rhls1#

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

赞(0）回复(0）举报 2023-03-19

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”），但我不确定这是否是你想要做的。

赞(0）回复(0）举报 2023-03-19

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传递给它来本机创建。

赞(0）回复(0）举报 2023-03-19

我来回答

typescript 在JSX中使用ReactType

3条答案

相关问题

热门标签

最新问答