你如何给组件起个名字？

Question

当我使用浏览器控制台控制台进行调试或反应开发工具时，他们总是将我的组件称为“构造函数”，我想改变它。看下面的例子：

我本来希望为我的组件设置定义的名称，这样他们就显示为“MyComponent的”为例。这将有助于页面上有很多组件，其中一个正在抛出我想解决的警告。

Answer 1

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

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

Answer 2

你不需要到displayName属性实际上设置为你的组件。它会自动设置。

但有些情况需要考虑。

。你把你的组件在一个单独的文件，该文件的内容是 -

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

在这种情况下displayName将undefined。

。你分配在一个变量中的组件。

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 
    ); 
    } 
}); 

。如果你正在使用ES6 e.g

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

在这种情况下displayName将是你给了即HelloMessage类的名称。