Question

我正在尝试设置此类扩展displayName的{{1}}属性。 React docs说React.Component是一个属性，所以可以在构造函数中设置它吗？这是我正在尝试的：

displayName

但是我正在使用的库（pacomo）并没有把它拿起来。我设置错了吗？我也试过在类之外设置它像无状态组件MyClass.displayName ='Test'，它也没有效果。

编辑：答案是：class TestUI extends React.Component { constructor(){ this.displayName = 'CustomTestUI' } }

Answer 1

如评论中所述，displayName应该在类上设置（作为静态变量），而不是实例（使用this）。

为清楚起见，这样做的原因仅仅是React依靠组件类来检索displayName。示例包括this return error和this function。

您还可以通过displayName设置组件类的Component.displayName = 'myName'。

Answer 2

给出的评论和答案应该足够了，但是我认为这是一个很好的机会来描述为什么你最初的尝试没有成功（以及为什么它无论如何都是一个坏主意）。

在使用类时，您有类“构造函数”，用于创建许多类“实例”。在您的类方法中，所有对 this 的引用都指向类实例。您始终可以通过执行 this.constructor 来访问构造函数。

因此，下面的方法是可行的，尽管实例更改其构造函数上的属性是非常糟糕的做法 - 请勿这样做：

class TestUI extends React.Component {
   constructor(){
     // DO NOT DO THIS (for educational purposes only - see other answers)
     this.constructor.displayName = 'CustomTestUI'
   }
}

如何在基于类的组件中设置displayName？

2 个答案: