在 React 中如何给组件命名？

Question

当我使用浏览器控制台或 React 开发工具进行调试时，它们总是将我的组件称为 "Constructor"，我想更改它。请参阅以下示例：

我希望为我的组件设置定义的名称，以便它们显示为 "MyComponent"。这对于包含许多组件且其中一个组件发出我想要解决的警告的页面会有所帮助。

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 将是您提供的 class 的名称，即 HelloMessage。

在 React 中如何给组件命名？

How do you give components a name in react?

asp.net

ecmascript-5

reactjs