eslint-plugin-react/require-render-return 用於功能組件

Question

不幸的是 eslint-plugin-react/require-render-return 僅適用於 Class 組件。 它不適用於功能組件，至少在我這邊。

為什么我需要這個？

考慮以下示例：

const Component = () => <div />

上述功能組件返回一個空的 div。

現在考慮我們可能需要添加一個鈎子：

const Component = () => {
   useEffect(() => { /* some side-effect here */ } );
   <div />
}

因此，當將箭頭函數從無體切換到有函數體時，開發人員忘記return DOM，函數什么也不返回。 捕捉這種回歸的唯一方法是在代碼審查期間，這涉及人為因素，這可能會被遺漏。 如果有一個 linter 規則會更好。

那么你們是做什么的呢？

Answer 1

這是一個完美的例子，說明了為什么你應該使用 TypeScript 而不是普通的舊 JavaScript。 它會在編譯/寫入時拋出指向該問題的錯誤。

const SomeComponent: React.FC = () => <div />
// ✅

const AnotherComponent: React.FC = () => {
  useEffect(() => {})
}
// 💥 "Type 'void' is not assignable to type 'ReactElement<any, any> | null'."

React 與 TypeScript 的結合在所有可能的方面確實是最好的。 我不能強調你絕對應該學習 TypeScript，每一秒都是值得的。