react/display-name

发表于 更新于 本文字数： 1.5k 阅读时长 ≈ 3 分钟
本文是作者对react/display-name的介绍，包括react/display-name的优势、实现细节、相关资料等，这些步骤可以帮助作者提高react/display-name的效率。

开发时，有时会遇到 ESLint: Component definition is missing display name (react/display-name)，这个原因是什么及如何处理呢，这里讨论下。

react/display-name

组件添加display-name唯一的好处是服务于调试，如下图，在react拓展程序调试时会方便我们找到对应的组件，从而再找到文件。

但日常开发，很多时候我们没有明确写display-name，那这些名字如何来的，因为react会帮我们赋值，一般组件创建有两种方式

  1. 函数，函数名称即display-name
  2. 类，类名称即display-name

但有时也会出现没有displayname，比如我们使用匿名函数创建组件，或者react.createElement，都会出现displayname缺失，这样在实际开发调试时，对于快速找到渲染组件逻辑就会是个负担，因此从最佳实践的角度出发，__建议都需要有react/display-name__，比如函数组件，明确函数名称。

自定义display-name

如上react会使用函数/类名称作为display-name，但是我们也可以再次修改这个名称方法即componentName.displayName = 'xxxxx'

类/函数均如此。

注意，react调试组件中看到的名称并非我们标签形式使用组件时的名称，比如即使我们在import时使用as进行别名化，其实并不会work。

举个例子，以下类组件，进行displayname修改，在调试时发现修改成功。

1
2
3
4
export class CardToc extends React.PureComponent {
  ...
}
CardToc.displayName = 'CardTocCustom';

eslint-react/display-name

ESLint下该规则建议打开，且设置error级。

我司实践如上。

1
"react/display-name": ["error"]

antd等组件库下的table column render

如上所说，很多时候并不会遇到这个问题，在table列自定义渲染时经常会报错。首先这并非antd的锅，比如腾讯tea的表单组件在使用中也会存在这个问题，真正的原因是检测会将其看成函数组件，但实际上这里只是个函数，只是返回结果是reactNode，解决办法如下。

  1. 如果只是简单的渲染，比如超链接等，直接行级别// eslint-disable-next-line react/display-name
  2. 如果是较为复杂的渲染，建立抽离为函数，这样lint会识别正确，不会报错，同时也实现代码可读性提高-render函数提取。

写在最后

Mark.

相关文档