ReactJS - javascript를 사용하여 컴포넌트의 displayName에 접속하려면 어떻게 해야 합니까?

ReactJS - javascript를 사용하여 컴포넌트의 displayName에 접속하려면 어떻게 해야 합니까?

React 컴포넌트를 만들고 있는데 렌더링 중인 컴포넌트의 유형을 콘솔에 기록하고 싶은 경우가 있습니다.displayName컴포넌트 이름을 표시할 때 사용합니다.

컴포넌트의 컨텍스트에서 액세스하려면displayName부동산?

예를 들어, 어떻게 하면,console.logdisplayName 컴포넌트를 나타내는 스테이트먼트를 나타냅니다.

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

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

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

콘솔 출력:

안녕, 안녕.

공공재산으로 사용할 수 있습니다.this.constructor.displayName.

아래는 양쪽의 '이름'을 취득하고 설정하는 방법을 상세하게 나타낸 코드 스니펫입니다.class컴포넌트 및 스테이트리스 기능 컴포넌트.

그 결과,name컴포넌트 이름에서 무료로 제공되는 속성class코드의 구성 요소 또는 상태 비저장 기능 구성 요소.그러나 익명 클래스/함수의 경우 정의되지 않으며 코드 최소화에 의해 삭제/변경될 수도 있습니다.

커스텀을 정의할 수 있습니다.displayName의 부동산class커스터마이즈해야 하는 경우 컴포넌트 또는 스테이트리스 기능 컴포넌트.이는 고차 컴포넌트에 특히 유용합니다.그것은 또한 항상 최소화를 견뎌낼 것이다.

에서class그리고 여기 명백하지 않을 수 있는 부분이 있습니다.name그리고.displayName클래스 자체의 속성입니다.그렇기 때문에 컴포넌트 인스턴스 내에서this.constructor.name/this.constructor.displayName사용하는 컴포넌트인스턴스에 대한 참조가 필요합니다.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>

에서 찾을 수 있습니다.this._descriptor.type

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

데모

이것은 테스트에만 사용해 주세요.언제든지 동작을 멈출 수 있습니다.0.12에서는 작동하지 않을 것 같습니다.

언급URL : https://stackoverflow.com/questions/24708577/reactjs-how-can-i-access-the-displayname-of-a-component-using-javascript