Question

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

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

e.g。如何在此示例中使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

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

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

如果您需要自定义，可以在class组件或无状态功能组件上定义自定义displayName属性。这对于更高阶的组件尤其有用。它也将永远存在于缩小中。

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

使用组件名称seems to be的最佳做法：

尝试使用Component.name
如果未定义，请尝试使用Component.displayName
未定义，退回到displayName / name

＆＃13;

'Component'

＆＃13;

'Anonymous'

＆＃13;

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

＆＃13;

Answer 3

您可以在this._descriptor.type

找到它

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

demo

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

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

3 个答案: