ReactJS-如何使用JavaScript访问组件的displayName?

我正在构建一些React组件,有时想通过console.log将呈现的组件类型记录到控制台,JSX在显示组件名称时会使用该类型。

从组件的上下文中,如何访问console.log属性?

例如 如何使此示例中的console.log语句显示组件的displayName?

var Hello = React.createClass({
    displayName: 'HeyHey',

    render: function() {
        console.log(this.displayName);

        return <div>Hello {this.props.name}</div>;
    }
});

控制台中的预期输出:

嘿嘿

Brad Parks asked 2020-07-06T01:07:06Z
3个解决方案
68 votes

它可以作为公共财产this.constructor.displayName获得。

Jacob R answered 2020-07-06T01:07:20Z
7 votes

以下是完整的代码段,详细说明了如何获取和设置<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>组件和无状态功能组件的“名称”。

您可以从'Anonymous'组件的名称或代码中的无状态功能性组件的名称中免费获得<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>的组件属性。 但是请注意,在匿名类/函数的情况下,这是不确定的,并且也可以通过代码缩小来消除/更改。

如果需要自定义,则可以在'Anonymous'组件或无状态功能组件上定义自定义<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>属性。 这对于高阶组件特别有用。 它也将始终幸免于难。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>上(这可能是不明显的部分),'Anonymous'displayName是类本身的属性。 这就是为什么在Component实例中必须使用this.constructor.name/this.constructor.displayName并参考Component实例而使用Component.name/Component.displayName的原因。下面的代码在实践中显示了这一点。

使用组件名称的最佳实践似乎是:

  • 尝试使用<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
  • 如果未定义,请尝试使用<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
  • 它是不确定的,回落到像<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>/'Anonymous'这样的硬编码字符串

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

davnicwil answered 2020-07-06T01:08:12Z
4 votes

您可以在this._descriptor.type上找到它

Hello <div>{this._descriptor.type.displayName}</div>

演示

仅将此用于测试; 它可能会在任何时候停止工作。 它不可能在0.12下工作。

Brigand answered 2020-07-06T01:08:41Z
translate from https://stackoverflow.com:/questions/24708577/reactjs-how-can-i-access-the-displayname-of-a-component-using-javascript