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，每一秒都是值得的。