eslint-plugin-react/require-render-return函数组件支持问题及方案问询

eslint-plugin-react/require-render-return 规则确实只对Class组件生效，不会覆盖函数组件的返回值校验，针对改写函数组件时漏写return导致组件无返回值的问题，有几个在生产项目里验证过的可靠方案：

• 类型校验拦截（准确率最高）
  不管是TypeScript项目还是开了checkJs配置的JavaScript项目，只要给函数组件明确标注JSX.Element返回值类型，漏写return的时候类型检查会直接飘红报错。举个TS的例子：

// 漏写return时TS会直接提示「函数缺少结束返回语句」
const Component = (): JSX.Element => {
  useEffect(() => { /* 相关副作用逻辑 */ } );
  // 这里没写return，编辑器直接标红
  <div />
}

这个方案几乎没有漏报，也很少出现误判，是目前解决这类问题最通用的方案。

• ESLint规则拦截（不用TS也能落地）
  纯JS项目不需要接入类型系统也能靠ESLint拦住这类问题，开启两个规则即可：

1. 核心规则no-unused-expressions，TS项目替换成@typescript-eslint/no-unused-expressions：单独写在函数体里、既不return也不赋值给变量的JSX标签会被判定为无用表达式，直接触发报错。注意JSX里写的条件渲染、短路逻辑属于JSX结构的一部分，不会被这个规则误判。
2. 核心规则consistent-return：配置要求函数所有代码路径的返回规则统一，组件本身是必须返回JSX、null或者undefined的函数，一旦出现某个分支漏return、或者整个函数完全没return的情况，规则会直接报警。

• 编码习惯兜底
  团队可以做个简单约定：写函数组件的时候优先用隐式返回的简写形式，真的需要加hooks、写多分支逻辑必须加大括号的时候，先把return (<div />)的骨架写好，再往里面补逻辑，从编码环节就减少漏写的概率。

之前也找过专门针对函数组件return的专项ESLint规则，目前没有比上面两个方案覆盖度更好的，靠这两层拦截基本能把所有漏写return的问题拦在代码提交之前，不用完全靠代码评审人肉排查。

内容的提问来源于stack exchange，提问作者Ickata