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组件和无状态功能组件的"名称" .

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

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

上class,并在这里是可能不是很明显的部分,在name和displayName都在性能类本身.这就是为什么在Component实例中你必须使用this.constructor.name/ this.constructor.displayName并引用你使用Component.name/ 的Component实例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>