错误“JSX 元素类型'...'没有任何构造或调用签名”是什么意思？

Question

我写了一些代码：

 function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

我收到一个错误：

JSX 元素类型 Elem 没有任何构造或调用签名

这是什么意思？

原文由 Ryan Cavanaugh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是 构造函数 和 实例 之间的混淆。

请记住，当您在 React 中编写组件时：

 class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

你这样使用它：

 return <Greeter whoToGreet='world' />;

你 不要这样 使用它：

 let Greet = new Greeter();
return <Greet whoToGreet='world' />;

在第一个示例中，我们传递了 Greeter ，这是我们组件的 _构造函数_。这才是正确的用法。在第二个示例中，我们传递了一个 Greeter 的 _实例_。这是不正确的，并且会在运行时失败，并出现“对象不是函数”之类的错误。

---

这段代码的问题

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

是它期待 React.Component 的 _实例_。您想要的是一个函数，该函数采用 React.Component 的构造 函数：

 function renderGreeting(Elem: new() => React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

或类似地：

 function renderGreeting(Elem: typeof React.Component) {
    return <span>Hello, <Elem />!</span>;
}

原文由 Ryan Cavanaugh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用 功能组件 并将组件作为道具传递，对我来说，解决方案是将 React.ReactNode 更改为 React.ElementType

 interface Props{
  GraphComp: React.ElementType
}

const GraphCard:React.FC<Props> = (props) => {
  const { GraphComp } = props;

  return (
   <div> <GraphComp /> </div>
  )
}

原文由 Nivethan 发布，翻译遵循 CC BY-SA 4.0 许可协议