是否有任何 eslint 规则可以防止 `Objects are not valid as a React child`

Question

我正在使用 Typescript 编写 React，在更改我的代码后，我开始看到 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

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

是否有任何 eslint 规则可以防止 `Objects are not valid as a React child`

Are there any eslint rules that could prevent `Objects are not valid as a React child`

typescript

reactjs

eslint