解决React报错JSX element type does not have any construct or call signatures

时间:2022-12-02 Borislav Hadzhiev 人气:0

总览

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

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

// 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。

// App.tsx
import React from 'react';
interface Props {
  comp: React.ElementType; //

加载全部内容