React报错之JSX element type does not have any construct

原文链接：https://bobbyhadz.com/blog/react-jsx-element-type-does-not-have-any-construct[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

总览

当我们试图将元素或react组件作为属性传递给另一个组件，但是属性的类型声明错误时，会产生"JSX element type does not have any construct or call signatures"错误。为了解决该错误，可以使用React.ElementType类型。

jsx-element-does-not-have-any-construct-or-call-signatures.png

这里有个例子来展示错误是如何发生的。

代码语言：javascript复制

// App.tsx
import React from 'react';

interface Props {
  comp: JSX.Element;
}

const Wrapper: React.FunctionComponent<Props> = props => {
  const {comp: Comp} = props;
  // ⛔️ JSX element type 'Comp' does not have any construct or call signatures.ts(2604)
  return (
    <div>
      <Comp name="James" />
    </div>
  );
};

const App: React.FunctionComponent = () => {
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;

  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};

export default App;

我们尝试将一个React组件作为属性传递给Wrapper组件，但我们将该React组件的类型声明为JSX.Element。

React.ElementType

为了解决该错误，将属性的类型声明为React.ElementType。

代码语言：javascript复制

// App.tsx
import React from 'react';

interface Props {
  comp: React.ElementType; // 


	

react https 网络安全 


	




	
 0 人点赞