구성 요소 정의에 표시 이름 react/display-name이 없습니다.

구성 요소 정의에 표시 이름 react/display-name이 없습니다.

여기에 표시명을 추가하려면 어떻게 해야 하나요?

export default () =>
  <Switch>
    <Route path="/login" exact component={LoginApp}/>
    <Route path="/faq" exact component={FAQ}/>
    <Route component={NotFound} />
  </Switch>;

화살표 함수를 직접 내보내도 구성 요소에 a가 표시되지 않습니다.displayName단, 일반 함수를 내보내는 경우 함수 이름은 다음과 같이 사용됩니다.displayName.

export default function MyComponent() {
  return (
    <Switch>
      <Route path="/login" exact component={LoginApp}/>
      <Route path="/faq" exact component={FAQ}/>
      <Route component={NotFound} />
    </Switch>
  );
}

함수를 변수에 넣을 수도 있습니다.displayName함수를 수동으로 실행한 다음 내보냅니다.

const MyComponent = () => (
  <Switch>
    <Route path="/login" exact component={LoginApp}/>
    <Route path="/faq" exact component={FAQ}/>
    <Route component={NotFound} />
  </Switch>
);

MyComponent.displayName = 'MyComponent';

export default MyComponent;

tldr: 화살표 기능을 지정된 기능으로 전환합니다.

표시되는 린트 오류:Component definition is missing display name react/display-name.

해결하려면 함수 이름을 지정할 수 있습니다(IOW, 화살표 기능 사용 안 함).이 예에서는,react-table커스텀 컴포넌트를 전달하여 셀에 렌더링합니다.

오류 없음:

{
  Cell: function OrderItems({ row }) {
    return (
      <a>
        View Items
      </a>
    );
  },
}

오류:

{
  Cell: ({ row }) => (
    <a>
      View Items
    </a>
  )
}

추가하는 방법displayName명명된 함수를 생성하지 않고 익명 구성 요소 함수에 대한 속성:recompose:

import { compose, setDisplayName } from 'recompose';

export default compose(setDisplayName('SomeComponent'))(props => ...);

아니면 그냥:

export default Object.assign(props => ..., { displayName: 'SomeComponent' });

'화살표 기능' 이전에는 팔로우 라인을 쓰는 것이 효과적이었다.

> /* eslint-disable react/display-name */
Header: () => <strong>ID</strong>,

여기에서는, 어떻게 동작하는지를 봐 주세요.https://eslint.org/docs/latest/user-guide/configuring/rules

마찬가지로 다음과 같은 기능 컴포넌트가 있는 경우에도 마찬가지입니다.

export default function test(){
    

return (<div></div>

}

그리고 그 안에 다른 컴포넌트를 만듭니다.텍스트 상자처럼 기능 컴포넌트 내부의 상태를 갱신합니다.이러한 참조를 사용하면 페이지 전체가 다시 렌더링되지 않고 해당 컴포넌트에 표시 이름을 붙일 필요가 있는 컴포넌트만 사용할 수 있습니다.그렇지 않으면 빌드 오류가 발생합니다.

export default function test(){
    const stateForFunctionalComponent = useRef("");

    const seperateTextBoxState = React.forwardRef((props,ref) => {
    const [textBoxDocTitle, setTextBoxDocTitle] = useState("");
    
    useEffect(() => {
      ref.current = textBoxDocTitle;
    },[textBoxDocTitle])
  
    return <input 
      id="somethingUnique" 
      type="text" 
      required="required" 
      placeholder="Enter document name..." 
      onInput={(e) => setTextBoxDocTitle(e.target.value)}>
  </input>})

    //Line that matters!!!
    seperateTextBoxState.displayName = "seperateTextBoxState";
}

    return (<div><seperateTextBoxState ref={stateForFunctionalComponent}/></div>)
}

eslint를 사용하는 경우 다음 코드를 yourclassName.displayName="name"으로 제공하지 않기 때문일 수 있습니다.

언급URL : https://stackoverflow.com/questions/52992932/component-definition-is-missing-display-name-react-display-name