当我们试图将元素或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。
// App.tsx
import React from 'react';
interface Props {
comp: React.ElementType; // 相关文章
- 解决React报错Unexpected default export of anonymou
- 解决React报错Expected `onClick` listener to be
- 解决React报错Encountered two children with the
- 解决React报错Functions are not valid as a React ch
- React中的Hooks路由跳转问题
- 解决React报错Cannot assign to 'current' because it
- 解决React报错The tag is unrecognized in this
- 解决React报错Style prop value must be an object
- vue3中如何使用ref和reactive定义和修改响应式数据(最
- 解决React报错useNavigate() may be used only i
- 正则表达式匹配ip地址超详细讲解
