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

Question

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

class TestUI extends React.Component {
   constructor(){
     this.displayName = 'CustomTestUI'
   }
}

但是我正在使用的库 ( pacomo ) 没有提取它。我设置不正确吗？我也试过将它设置在类之外，比如无状态组件 MyClass.displayName = 'Test' 也没有效果。

编辑:答案是:static displayName = 'CustomTestUI'

Answer 1

如评论中所述，displayName应该在类上设置为静态变量，不是使用 this 的实例.

class TestUI extends React.Component {
   static displayName = 'CustomTestUI';
   ...
}

以下是 React 检索 displayName 的几个示例来自 this error 中的组件类和 this function .

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

class TestUI extends React.Component {
    ...
}

TestUI.displayName = 'CustomTestUI';