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

Question

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

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

因此，这是在运行时捕获的类型错误。

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

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

这是一个非常简单的示例（ TSPlayground ）：

type Props = {
    example:{}
};

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

我预计会出现一个错误，指出在 JSX 中使用example 。

我一直在做一些谷歌搜索，但我找不到一条似乎能抓住这一点的规则。

有没有人知道的？

Answer 1

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