React 组件“displayName”是做什么用的？答案

【问题标题】：What is React component 'displayName' is used for?React 组件“displayName”是做什么用的？
【发布时间】：2017-05-25 16:02:51
【问题描述】：

我知道这是 it considered a good practice 通过添加 displayName 属性来命名反应组件，但我不确定我知道为什么。在反应文档中，它说：

displayName 字符串用于调试消息。 JSX 自动设置这个值；深入了解 JSX。

为什么如此重要？如果我不添加会发生什么？（到目前为止我还没有，调试也没有问题）

对于如何命名组件有什么建议/好的做法吗？

【问题讨论】：

如果不添加组件名称将不显示，并且很难调试状态。但是如果你使用 Es6 创建组件（扩展组件），那么你不需要为每个组件手动添加显示名称。

标签： reactjs eslint

【解决方案1】：

我总是将displayName 设置为与我分配给它的变量相同的名称。这只会在开发版本中使用，因为它是通过生产版本中的死代码消除来删除的，并且不应在您的应用程序中依赖。

至于用在什么地方，主要是在react错误消息中。这就是为什么提到它对调试很有价值的原因。如果无法派生名称，则错误消息默认为Component，当您的项目中有超过 1 个组件时，这将非常难以调试。

以下是一些在 react 源中引用 displayName 的错误消息：

Invalid Return

Inline style error

【讨论】：

实际如何设置 displayName？根据反应文档，它似乎是从组件的名称推断出来的，但没有说明如何为非 HOC 手动设置它。
它是一个静态属性。最快的方法是直接设置，即。 hoc.displayName = "hocName";
我们是否需要在非 HOC 组件上也设置它@kwelch？
在单元测试用例中模拟这个组件时不要忘记正确使用 this。 jest.mock( '../path/to/component', () => ({ __esModule: true, default: () => 'component name mock', }) );
如果我不对不同的组件使用唯一的显示名称，我的应用会开始出现奇怪的错误吗？

【解决方案2】：

这篇文章帮助了我：

How do I get string name of React Native component class?

    class CardGroup extends Component {
      render() {
        return (
          <div>{this.props.children}</div>
        )
      }
    }
    CardGroup.propTypes = {
      children: function (props, propName, componentName) {
        const prop = props[propName]

        let error = null
        React.Children.forEach(prop, function (child) {
          if (child.type !== Card) {
            error = new Error('`' + componentName + '` children should be of type `Card`.');
          }
        })
        return error
      }
    }

【讨论】：