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

Question

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

这是我在班级组件中得到的：

const 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>