是否有任何 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 ）。