JSX 元素类型“组件”没有任何构造或调用签名答案

【问题标题】：JSX element type 'Component' does not have any construct or call signaturesJSX 元素类型“组件”没有任何构造或调用签名
【发布时间】：2021-11-27 13:24:57
【问题描述】：

我有以下代码

const pageArea = (Component:ReactNode,title:string) => ({ ...props }) => {

    return (
      <>
       
          <div>
           
            { Component && ( <Component {...props} /> )}
             
          </div>
      </>
    );
  };

抛出错误

JSX 元素类型“组件”没有任何构造或调用签名

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

因为 ReactNode 是一个节点，所以不能像调用 Component 那样调用它。

我猜你的意思是组件是一个 React 组件。所以，要修复它，请将类型从 ReactNode 更改为 React.ComponentType 或 React.ComponentClass 或 React.FC（随便你想要什么）。

JSX 元素类型“组件”没有任何构造或调用签名 reactjs

【讨论】：

谢谢，这行得通，你能帮我理解 const pageArea = (Component:ReactNode,title:string) => ({ ...props }) => {}, component 和标题是这个函数的参数那么什么是...props，或者你可以给我一些类似语法的链接来理解
有一些关键字可以帮助您：React 高阶组件 (HOC)、React 函数组件、React Props 类型。给你一些链接：medium.com/@jrwebdev/…, freecodecamp.org/news/…
感谢这些链接，但仍然无法找到该语法，例如如果我说那是一种箭头函数，那么正常语法就像 const pageArea = (Component:ReactNode,title:string) = > {} ,，但是额外的 ({ ...props }) => 是如何工作的
您需要了解高阶组件的概念。第二个箭头函数是由高阶组件创建的生成组件。