如何解决React中组件缺少display name的react/display-name报错

这个报错是ESLint的react/display-name静态校验规则触发的，不属于React运行时错误，所以开发模式下如果校验规则仅做警告不拦截运行，代码可以正常执行；生产构建环节通常会将ESLint校验级别提升为错误阻断构建，才会抛出这个提示。
触发校验失败的核心原因是：调用React.forwardRef（以及React.memo这类高阶组件API）时传入了匿名箭头函数，ESLint的静态扫描逻辑无法自动将外层赋值的变量名MyButton和内部传入的匿名函数做关联，判定组件缺失用于调试识别的显示名称。

• 给传入forwardRef的函数设置显式函数名，替换匿名箭头函数为具名函数，ESLint可以自动识别函数名完成校验，是侵入性最低的方案：

const MyButton = React.forwardRef(function MyButton({ onClick, href }, ref) {
  return (
    <a href={href} onClick={onClick} ref={ref} style={{color: "#fff"}}>
      in my statement is mistake
    </a>
  )
})

• 手动为组件挂载displayName属性，显式声明组件名，这种写法兼容性最好，React DevTools和静态校验都能准确识别：

const MyButton = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref} style={{color: "#fff"}}>
      in my statement is mistake
    </a>
  )
})
MyButton.displayName = 'MyButton'

• 如果不需要做组件名的调试识别，可以直接修改ESLint配置关闭这条规则，不推荐使用，会导致DevTools中组件显示为匿名组件，提升调试成本：

// .eslintrc 配置文件
{
  "rules": {
    "react/display-name": "off"
  }
}

注意：前两种方案不会影响组件运行逻辑，只是补充了静态校验和调试需要的标识信息，不会增加额外的生产包体积。

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