你如何给组件起反应的名字？

Question

当我使用浏览器控制台控制台或反应开发工具进行调试时，它们总是将我的组件称为＆＃34;构造函数＆＃34;我想改变这一点。请参阅以下示例：

我希望为我的组件设置已定义的名称，以便它们显示为＆＃34; MyComponent＆＃34;例如。这对于有许多组件的页面有帮助，其中一个组件正在发出我想要解决的警告。

Answer 1

将displayName属性添加到您的组件：

var Component = React.createClass({  
  displayName: 'MyComponent',
  ...
});

Answer 2

您实际上不需要将displayName属性设置为组件。它会自动设置。

但是在某些情况下你需要考虑。

1 。您将组件放在单独的文件中，该文件的内容为 -

 export default React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

在这种情况下，displayName将为undefined。

2 。您已在变量中分配了该组件。

var TestComponent = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

现在displayName设置为TestComponent。

请参阅相应的jsx转化以获得更多说明。

var TestComponent = React.createClass({
  displayName: "TestComponent",

  render: function render() {
    return React.createElement(
      "h1",
      null,
      "Hello, ",
      this.props.name
    );
  }
});

3 。如果您使用的是es6，例如

class HelloMessage extends React.Component {
    render() {
      return <div > Hello component {
      } < /div>;
  }
}

在这种情况下，displayName将是您提供的课程名称，即HelloMessage。