Javascript “元素”类型的参数不可分配给“ReactElement<any>”类型的参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42036992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>
提问by pleasedesktop
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<any>'.
Type 'null' is not assignable to type 'ReactElement<any>
This only happens when the strictNullChecksTypeScript compilation flag is set to true.
这仅在strictNullChecksTypeScript 编译标志设置为 时发生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?
这是一个错误，还是我别无选择？
采纳答案by Morten Christiansen
This is apparently an issue which was introduced in the 15.0.5 React type definitions. If you change to 15.0.4, everything should be fine.
这显然是 15.0.5 React 类型定义中引入的一个问题。如果您更改为 15.0.4，一切都应该没问题。
See this issue: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14284
看到这个问题：https: //github.com/DefinitelyTyped/DefinitelyTyped/pull/14284
回答by TARJU
For me the issue was something else which i identified after having hard time.
对我来说，这个问题是我在经历困难后发现的其他问题。
If you have JSX inside your component or component test file must have .tsx as your file extension. My code was not compiling as i was keeping file name with .ts file extension. The moment i renamed it to .tsx/jsx it started working nicely!
如果您的组件或组件测试文件中有 JSX，则必须将 .tsx 作为文件扩展名。我的代码没有编译，因为我将文件名保留为 .ts 文件扩展名。我将它重命名为 .tsx/jsx 的那一刻，它开始工作得很好！
Please also note i was using Typescript that's why i renamed it to .tsx incase you are using ES6 rename it to .jsx
另请注意，我使用的是 Typescript，这就是为什么我将其重命名为 .tsx 以防您使用 ES6 将其重命名为 .jsx
