如何在功能组件中设置 displayName [React]答案

【问题标题】：how to set displayName in a functional component [React]如何在功能组件中设置 displayName [React]
【发布时间】：2017-09-07 10:33:00
【问题描述】：

我知道有时需要设置displayName，尤其是在处理生产版本时。我想知道如何使用我的功能组件进行设置 - 是否可能/允许？

这是我的课程组件中的内容：

const MyComponent = React.createClass({
  displayName: 'HeyHey',

  render: function() {
    console.log(this.displayName);
  }
});

如何在无状态组件中做同样的事情？

【问题讨论】：

标签： javascript reactjs functional-programming

【解决方案1】：

displayName 的文档说

displayName string 用于调试消息。通常，您不需要显式设置它，因为它是从定义组件的函数或类的名称推断出来的。如果您想显示不同的名称以进行调试或创建高阶组件时，您可能需要显式设置它，请参阅Wrap the Display Name for Easy Debugging for details。

在您的情况下，您只需使用

const MyComponent = (props) => { ... }

MyComponent.displayName = 'HeyHey'

或者你可以使用Object.assign

const MyComponent =
  Object.assign
    ( props => { ... }
    , { displayName: 'HeyHey' }
    )

【讨论】：

@Petr Bela 请不要破坏其他人的答案
@naomik 如果您被冒犯了，我很抱歉，但这不是对 OP 问题的正确答案，此外，将实例道具与静态 displayName 混合可能会产生误导。打开output.jsbin.com/xamefaqege，在 React 开发工具中你会看到组件的名称仍然是 MyComponent。另一方面，通过下面的答案，请参阅output.jsbin.com/zucarej displayName 设置为 HeyHey。
关于defaultProps 的整个部分无关紧要，应该从这个答案中删除。
@user633183 当其他人帮助删除defaultProps 的无关信息时，您是否有理由继续重新添加它？看起来你建议你可以设置defaultProps.name，它的工作方式与displayName一样，这显然是错误的。
@Thankyou 这无关紧要，因为 1）不回答 OP 的问题，2）类/函数参数与 defaultProps 无关。

【解决方案2】：

想通了

const MyComponent = props => {
  return (
    <p>How you doin?</p>
  )
}

MyComponent.displayName = "MyComponent"

【讨论】：

只是好奇为什么我们应该使用 defaultProps 方式而不是 .displayName？
我希望在网络检查器工具中查看 displayName，这个解决方案对我有用。使用接受的defaultProps 答案时，它仍然是“未知”
两者都是正确的。不确定 defaultProps 与任何东西有什么关系。

【解决方案3】：

当函数组件被定义为箭头函数时，React 要么需要 displayName，要么需要函数本身的名称。
所以对于箭头函数：

const SomeComponent = () => <p>I come from an arrow function</p>

SomeComponent.displayName = 'HeyHey'

如果你使用一个函数，它会使用它的名字displayName，而不必单独定义它：

function HeyHey() { return <p>I come from a non-arrow function!</p> }

【讨论】：

IMO 从箭头函数迁移到常规函数要干净得多。