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

我知道有时需要设置

displayName

，尤其是在处理生产构建时。我想知道如何使用我的功能组件进行设置-是否可能/允许

下面是我在我的类组件中得到的内容：

const MyComponent=React.createClass({
displayName:“HeyHey”，
render:function（）{
console.log（this.displayName）；
}
});

如何在无状态组件中执行相同的操作？

解决了这个问题

const MyComponent=props=>{
返回(
你好吗

)
}
MyComponent.displayName=“MyComponent”

例如的文档

displayName

字符串用于调试消息。通常，您不需要显式设置它，因为它是从定义组件的函数或类的名称推断出来的。如果要显示不同的名称以进行调试，或者在创建高阶组件时，可能需要显式设置它，请参见

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

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

MyComponent.displayName = 'HeyHey'

---

或者您可以使用

Object.assign

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

---

当功能组件被定义为箭头函数时，React需要

displayName

，或者需要函数本身的名称。
因此，对于箭头函数：

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

SomeComponent.displayName = 'HeyHey'

---

只是好奇为什么我们应该使用defaultProps而不是.displayName？我想在web inspector工具中看到displayName，这个解决方案对我很有效。当使用接受的

defaultProps

answer时，它仍然是“未知”的。两者都是正确的。不知道defaultProps与任何事情有什么关系。@Petr Bela请不要诋毁他人的隐私answers@naomik如果你被冒犯了，我很抱歉，但这不是OP问题的正确答案，而且，将实例道具与静态displayName混合使用可能会产生误导。打开React dev tools，您将看到组件的名称仍然是MyComponent。另一方面，使用下面的答案，查看displayName是否设置为HeyHey。关于

defaultProps

的整个部分都是不相关的，应该从此答案中删除。@user633183当其他人帮助删除它时，您是否有理由不断重新添加关于

defaultProps

的不相关信息？看起来您是在建议您可以设置

defaultProps.name

，它的工作原理与

displayName

相同，这显然是错误的。@谢谢，这是不相关的，因为1）没有回答OP的问题，2）类/函数参数与defaultProps无关。根据上面的IMO，从arrow函数迁移到常规函数要干净得多。

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