我总是将displayName设置为与我分配给它的变量相同的名称。这将在开发构建中使用，因为它在生产构建中通过死代码消除被删除，不应在您的应用程序中依赖。
至于在哪里使用它，主要是在react错误消息中，这就是为什么它被提到对调试有价值的原因。如果没有名称可以得到，错误消息默认为Component，这是非常困难的调试，当你在你的项目中有任何一个以上的组件。
以下是一些在React源中引用displayName的错误消息：
无效返回
内联样式错误

这篇文章帮助我：
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
      }
    }

React文档非常清楚地说明了它的用途以及何时使用它：
displayName字符串用于调试消息中。通常，您不需要显式设置它，因为它是从定义组件的函数或类的名称中推断出来的。如果出于调试目的或在创建更高级别的组件时希望显示不同的名称，则可能需要显式设置它。
在大多数情况下，您不需要设置displayName，因为它是从函数/类名推断出来的。

当我重新格式化组件以使用允许React根据变量定义推断displayName的语法时，我不再收到错误。

const LandingPage = () => {
  return (
    <div>Landing Page</div>
  );
};

export default LandingPage;