[英]Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>
This code:这段代码:
import * as React from 'react';
const Component = () => <div/>;
function culprit<P>(node: React.ReactElement<P>) {
console.log(node);
}
culprit(<Component/>);
...produces this compilation error when compiling with TypeScript: ...在使用 TypeScript 编译时产生此编译错误:
error TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement'.
错误 TS2345:“Element”类型的参数不可分配给“ReactElement”类型的参数。 Type 'null' is not assignable to type 'ReactElement
类型“null”不可分配给类型“ReactElement”
This only happens when the strictNullChecks TypeScript compilation flag is set to true
.只有当strictNullChecks TypeScript 编译标志设置为
true
时才会发生这种情况。
Yes I could disable that flag, but I want it on for added compile-time checking/safety.是的,我可以禁用该标志,但我希望启用它以增加编译时检查/安全性。
If I change the last line to this:如果我将最后一行更改为:
culprit( (<Component/> as React.ReactElement<any>) );
...it works with the flag set to true
. ...它适用于设置为
true
的标志。
I've recently tried migrating from "plain" JavaScript to TypeScript in a React project and this is tripping up all my tests, so adding all the TypeScript type assertions to all these occurrences in the test code will be a pain.我最近尝试在 React 项目中从“纯”JavaScript 迁移到 TypeScript,这会阻碍我的所有测试,因此将所有 TypeScript 类型断言添加到测试代码中的所有这些事件将是一件痛苦的事情。
Is this a bug, or do I have no other choice?这是一个错误,还是我别无选择?
If you have JSX inside your component or component test file must have .tsx
as your file extension.如果您的组件或组件测试文件中有 JSX,则必须将
.tsx
作为文件扩展名。 My code was not compiling as I had the .ts file extension.我的代码没有编译,因为我有 .ts 文件扩展名。 The moment I renamed it to
.tsx
/ jsx
it started working nicely!我将它重命名为
.tsx
/ jsx
那jsx
它开始工作得很好!
Please also note that I was using Typescript, so that's why I renamed it to .tsx
.另请注意,我使用的是 Typescript,这就是我将其重命名为
.tsx
的原因。 In case you are using ES6 rename it to .jsx
.如果您使用 ES6,
.jsx
其重命名为.jsx
。
This is apparently an issue which was introduced in the 15.0.5 React type definitions.这显然是 15.0.5 React 类型定义中引入的一个问题。 If you change to 15.0.4, everything should be fine.
如果您更改为 15.0.4,一切都应该没问题。
See this issue: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14284看到这个问题: https : //github.com/DefinitelyTyped/DefinitelyTyped/pull/14284
This happens when I don't return JSX inside of React Fragment or empty tags.当我不在 React Fragment 或空标签中返回 JSX 时,就会发生这种情况。
const ErrorMessage: FC<ErrorProps> = (props) => {
if (!isEmpty(props.errors)) {
return Object.entries(props.errors).map((item) => (
<Typography component="span">{item[0]}</Typography>
))
};
return <></>;
};
When I added empty tags everything worked as expected.当我添加空标签时,一切都按预期工作。
const ErrorMessage: FC<ErrorProps> = (props) => {
if (!isEmpty(props.errors)) {
return (
<>
{Object.entries(props.errors).map((item) => (
<Typography component="span">{item[0]}</Typography>
))}
</>
)
};
return <></>;
};
Also, if we remove the return <></>
statement error will be shown.此外,如果我们删除
return <></>
语句,则会显示错误。 Component, as I wrote, always need to return correct JSX component.正如我所写,组件总是需要返回正确的 JSX 组件。
Versions版本
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.