React 组件“displayName”的用途是什么?

问题描述 投票:0回答:4

我知道通过添加 displayName 属性来命名 React 组件是

它被认为是一个很好的做法,但我不确定为什么。在 React 文档中,它说:

displayName 字符串用于调试消息。 JSX 自动设置该值;请参阅 JSX 深入了解。

为什么这如此重要? 如果我不添加会发生什么? (到目前为止我还没有,调试也没有问题。)

关于如何命名组件有什么建议/良好实践吗?

reactjs eslint
4个回答
70
投票
我总是将

displayName

 设置为与我分配给它的变量相同的名称。这将在开发构建中使用,因为它通过生产构建上的死代码消除而被删除,并且不应在您的应用程序中依赖。

至于用在什么地方,主要是在react错误消息中。这就是为什么它被认为对于调试很有价值。如果无法派生出名称,则错误消息默认为

Component

,当项目中的组件超过 1 个时,这非常难以调试。

以下是在反应源中引用 displayName 的一些错误消息:

无效退货

内联样式错误


8
投票
React 文档

非常清楚它的用途以及何时使用它:

displayName 字符串用于调试消息。通常,您不需要显式设置它,因为它是从定义组件的函数或类的名称推断出来的。如果您想出于调试目的或创建高阶组件时显示不同的名称,您可能需要显式设置它。

在大多数情况下,您不需要设置
displayName

,因为它是从函数/类名称推断出来的。

一个例外是使用复合组件时:

const Foo = () => ( <div>This is foo</div> ); Foo.Bar = () => ( <div>This is bar</div> );

Foo.Bar

将被命名为

Anonymous
,因此您可能需要手动命名它:
Foo.Bar.displayName = "Foo.Bar";



2
投票

如何获取React Native组件类的字符串名称?

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



0
投票

const LandingPage = () => { return ( <div>Landing Page</div> ); }; export default LandingPage;

	
© www.soinside.com 2019 - 2024. All rights reserved.