ReactJS - 如何使用javascript访问组件的displayName？

Question

我正在构建一些React组件，有时希望通过displayName来记录正在呈现的组件类型，JSX在显示组件名称时使用该组件。

从组件的上下文中，如何访问displayName属性？

例如，如何在此示例中使用console.log语句显示组件的displayName？

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

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

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

控制台中的预期输出：

HeyHey

Answer 1

它可以作为公共属性this.constructor.displayName 。

Answer 2

下面是一个完整的代码片段，详细说明了如何获取和设置class组件和无状态功能组件的“名称”。

你得到一个name对组件属性的分类 ，从名称class组件或代码无国籍功能组件。 但请注意，在匿名类/函数的情况下，这将是未定义的，并且也可以通过代码缩小来消除/更改。

您可以定义自定义displayName对房地产class组件或无国籍功能组件，如果你需要定制。 这对于更高阶的组件尤其有用。 它也将永远存在于缩小。

在class ， 这里是可能不明显的部分， name和displayName是类本身的属性。 这就是为什么在Component实例中你必须使用this.constructor.name / this.constructor.displayName并引用Component实例你使用Component.name / Component.displayName 。 下面的代码在实践中显示了这一点。

使用组件名称的最佳做法似乎是 ：

• 尝试使用displayName
• 如果未定义，请尝试使用name
• 这是未定义的，回归到像'Component' / 'Anonymous'这样的硬编码字符串

 class ClassComponent extends React.Component { componentDidMount () { if (!this.props.wrapped) { console.log('ClassComponent') console.log(` displayName: ${this.constructor.displayName}`) console.log(` name: ${this.constructor.name}\\n\\n`) } } render () { return <div>ClassComponent {this.props.wrapped && '(wrapped)'}</div> } } ClassComponent.displayName = 'ClassComponentCustom' const SFComponent = (props) => ( <div>SFComponent {props.wrapped && '(wrapped)'}</div> ) SFComponent.displayName = 'SFComponentCustom' const wrap = (WrappedComponent) => { class Wrapper extends React.Component { componentDidMount () { console.log('HOC') console.log(` displayName: ${this.constructor.displayName}`) console.log(` name: ${this.constructor.name}`) console.log(` wrapping a Component with:`) console.log(` displayName: ${WrappedComponent.displayName}`) console.log(` name: ${WrappedComponent.name}\\n\\n`) } render () { return <WrappedComponent wrapped /> } } // for the wrapped component // check for displayName for something more descriptive, // else fall back to name const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name Wrapper.displayName = `WrapperCustom<${wrappedComponentName}>` return Wrapper } const WrappedClassComponent = wrap(ClassComponent) const WrappedSFComponent = wrap(SFComponent) const Example = () => ( <div className="example"> <ClassComponent /> <SFComponent /> <WrappedClassComponent /> <WrappedSFComponent /> </div> ) ReactDOM.render( <Example />, document.getElementById('root') ) 

 .example > div { font-family: 'Arial'; font-size: 14px; padding: 5px 10px; margin-bottom: 10px; background: rgb(240,240,240); border-radius: 4px; } 

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

Answer 3

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

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

演示

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