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

Question

我知道displayName有时候需要设置它,特别是当你处理生产版本时.我想知道如何使用我的功能组件设置它 - 它是否可能/允许？

这是我在我的课程组件中得到的:

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

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

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

Answer 1

文档displayName说

该displayName字符串用于调试消息.通常,您不需要显式设置它,因为它是从定义组件的函数或类的名称推断出来的.如果要为调试目的显示不同的名称或创建更高阶的组件,可能需要显式设置它,有关详细信息,请参阅包装显示名称以进行简单调试.

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

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

MyComponent.displayName = 'HeyHey'

如果您要在组件上设置默认属性,请defaultProps改用

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

MyComponent.defaultProps = {
  name: 'Alice'
}

ReactDOM.render (<MyComponent/>, document.body)
// <p>How you doin, Alice?</p>

Answer 2

弄清楚了

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

MyComponent.displayName = "MyComponent"

Answer 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> }