0%

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.

相关文档