기능 컴포넌트에서 displayName을 설정하는 방법 [React]

기능 컴포넌트에서 displayName을 설정하는 방법 [React]

그 설정을 알고 있습니다displayName특히 프로덕션 빌드를 다룰 때 필요할 수 있습니다.기능 컴포넌트를 사용하여 설정하는 방법을 알고 싶습니다.가능/허가가 가능합니까?

제 클래스 컴포넌트는 다음과 같습니다.

const MyComponent = React.createClass({
  displayName: 'HeyHey',

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

스테이트리스 컴포넌트 내에서 동일한 작업을 수행하려면 어떻게 해야 합니까?

문서상으로는 다음과 같은 내용이 있습니다.

그displayName string은 메시지 디버깅에 사용됩니다.일반적으로 컴포넌트를 정의하는 함수 또는 클래스의 이름에서 유추되므로 명시적으로 설정할 필요가 없습니다.디버깅을 위해 다른 이름을 표시하거나 상위 구성요소를 작성하는 경우, 자세한 내용은 표시 이름 랩을 참조하십시오.

당신의 경우, 단순히 다음을 사용할 수 있습니다.

const MyComponent = (props) => { ... }

MyComponent.displayName = 'HeyHey'

---

또는 를 사용할 수 있습니다.Object.assign

const MyComponent =
  Object.assign
    ( props => { ... }
    , { displayName: 'HeyHey' }
    )

알아냈다

const MyComponent = props => {
  return (
    <p>How you doin?</p>
  )
}

MyComponent.displayName = "MyComponent"

어느 하나의 요구에 대응하다displayName기능 컴포넌트(화살표 함수로 정의되어 있는 경우) 또는 기능 컴포넌트 자체의 이름.
화살표 기능의 경우:

const SomeComponent = () => <p>I come from an arrow function</p>

SomeComponent.displayName = 'HeyHey'

함수를 사용할 경우 해당 함수의 이름은displayName별도로 정의할 필요가 없습니다.

function HeyHey() { return <p>I come from a non-arrow function!</p> }

언급URL : https://stackoverflow.com/questions/43356073/how-to-set-displayname-in-a-functional-component-react