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

Question

我正在构建一些 React 组件，有时希望通过 displayName 将正在渲染的组件类型记录到控制台，JSX 在显示组件名称时使用该类型。

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

例如如何使本例中的console.log 语句显示组件的显示名称？

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

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

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

控制台中的预期输出：

嘿嘿

Answer 1

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

您从class 组件的名称或代码中的无状态功能组件的名称​​免费获得组件上的name 属性。但是请注意，在匿名类/函数的情况下，这将是未定义的，也可以通过代码缩小来消除/更改。

如果您需要自定义，您可以在class 组件或无状态功能组件上定义自定义displayName 属性。这对于高阶组件特别有用。它也将始终在缩小后存活。

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

使用组件名称seems to be的最佳实践：

• 尝试使用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 2

它可以作为公共财产this.constructor.displayName使用。

Answer 3

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

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

demo

仅用于测试；它可能随时停止工作。它不太可能在 0.12 中工作。