我知道通过添加 displayName
属性来命名 React 组件是
它被认为是一个很好的做法,但我不确定为什么。在 React 文档中,它说:
displayName 字符串用于调试消息。 JSX 自动设置该值;请参阅 JSX 深入了解。为什么这如此重要? 如果我不添加会发生什么? (到目前为止我还没有,调试也没有问题。)
关于如何命名组件有什么建议/良好实践吗?
在大多数情况下,您不需要设置
displayName
,因为它是从函数/类名称推断出来的。
一个例外是使用复合组件时:const Foo = () => (
<div>This is foo</div>
);
Foo.Bar = () => (
<div>This is bar</div>
);
Foo.Bar
将被命名为
Anonymous
,因此您可能需要手动命名它:Foo.Bar.displayName = "Foo.Bar";
class CardGroup extends Component {
render() {
return (
<div>{this.props.children}</div>
)
}
}
CardGroup.propTypes = {
children: function (props, propName, componentName) {
const prop = props[propName]
let error = null
React.Children.forEach(prop, function (child) {
if (child.type !== Card) {
error = new Error('`' + componentName + '` children should be of type `Card`.');
}
})
return error
}
}
const LandingPage = () => {
return (
<div>Landing Page</div>
);
};
export default LandingPage;