是否有任何 eslint 规则可以防止“对象作为 React 子项无效”答案

【问题标题】：Are there any eslint rules that could prevent `Objects are not valid as a React child`是否有任何 eslint 规则可以防止“对象作为 React 子项无效”
【发布时间】：2021-03-07 13:40:39
【问题描述】：

我正在使用 Typescript 编写 React，在对我的代码进行更改后，我开始看到 Objects are not valid as a React child 错误。

我已将属性从 string 更改为 Optional<string>，因此该错误完全合理，因为我的 <div>{property}</div> 代码不再正确。

所以，这是在运行时捕获的类型错误。

我没有进行任何强制转换或任何其他代码“技巧”来尝试颠覆预先存在的类型检查；我只是将 React 在运行时检测到的值渲染为对象。

在我看来，适当的 linting 规则或 typescript 配置应该能够捕获 property 不是有效的 React 子节点。

这是一个非常简单的例子 (TSPlayground)：

type Props = {
    example:{}
};

const Foo = ({example}: Props) => <div>{example}</div>

我预计会出现指向在 JSX 中使用 example 的错误。

我一直在做一些谷歌搜索，但我找不到似乎可以捕捉到这一点的规则。

有没有人知道的？

【问题讨论】：

这不是 ESLint 或 TSLint 错误，而是实际的 React 错误。 github.com/facebook/react/… 。这意味着在某些代码路径中没有返回 JSX，而是返回某种类型的对象，例如可能来自不完整错误处理的错误对象，但如果没有看到代码就很难说。您确定这是编译错误而不是运行时错误？
You are sure this is a compilation error rather than runtime error? @AlexanderStaroselsky 我认为他们的目标是添加一个编译错误，这样他们就可以在遇到运行时反应错误之前捕获它。
我不确定我是否希望 linter 能够捕捉到这一点，但我很惊讶 type system 没有。 <div>{property}</div> 被转译为 React.createElement("div", null, property)，而 ...children 其余参数被键入为 React.ReactNode[]。
哦，但是这种类型非常广泛，请参阅例如讨论。 github.com/DefinitelyTyped/DefinitelyTyped/issues/35622
是的，这目前是一个运行时错误，我希望它是一个编译时错误。就个人而言，我认为这应该是一个类型系统错误，但是在阅读了 jonrsharpe 链接到的内容后，我明白为什么这会很困难。这就是为什么我希望可能有一个可配置的 linting 规则，它会在构建时施加渲染器在运行时施加的限制......无论如何，这就是类型系统的全部意义！

标签： reactjs typescript eslint

【解决方案1】：

正如其他人所提到的，目前没有这样的功能可用。此外，与捕获编译错误相比，linter 更倾向于样式化。我认为您的要求是不可能的，因为 example 是一种动态类型，将其设置为字符串使其成为有效的 JSX 节点，而将其设置为对象则使其无效。由于 JS 是一种动态语言，我们无法提前知道这一点。 Typescript 在这种情况下会有所帮助，但这是与 eslint 规则不同的类型系统，正如 @jonrsharpe 在 cmets 中提到的，在 typescript 存储库中添加您请求的功能时存在问题 (#35622)。

【讨论】：