구성 요소 정의에 forwardRef의 표시 이름이 없습니다.

구성 요소 정의에 forwardRef의 표시 이름이 없습니다.

이 튜토리얼을 따라하고 있었습니다.React.forwardRef여기서 이 컴포넌트를 만듭니다.

import React from "react";

const Search = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input ref={ref} type="search" />;
});

export default Search;

그러나 앱을 실행하면 컴포넌트가 다음 오류를 일으킵니다.

Component definition is missing display name  react/display-name

이 질문을 바탕으로 저는 이런 걸 할 수 있을 것 같았습니다.

const Search = MySearch = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input ref={ref} type="search" />;
});

export default Search;

그러나 이것 역시 문제를 해결하지 못했다.

그러면 내 컴포넌트에 표시 이름을 붙이려면 어떻게 해야 할까요?

Component definition is missing display name react/display-name에슬린트

리액트 코드 작성 시 베스트 프랙티스에 관한 스타일 가이드 및/또는 규약을 따르기 위해 존재하는 보풀 규칙입니다.

eslint의 특정 규칙에 대한 자세한 내용은 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md 를 참조하십시오.

또한 이 페이지에서 왜 그것이 존재하는지, 그리고 무엇이 존재하는지 확인할 수 있습니다.displayName on Components를 하므로 디버깅 시 .displayName로 합니다.input.

또한 , 「기능 컴포넌트」를 으로써, 그 수을 알 수 .displayName포포컴컴이것이 도움이 될 것입니다.

import React from "react";

const Search = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input ref={ref} type="search" />;
});
Search.displayName = "Search";

export default Search;

하나의 은 특정 하지 않도록 하는 것입니다.이러한 린터는, 해 무효로 하는 것입니다.// eslint-disable-next-line react/display-name컴포넌트 선언 바로 위에 또는 이와 유사합니다.

할 이 ,, 을, 을, 을, 을, 앱, that, that, that, that, that, that, that, that, that, that, that, that, that, that, that, that, that, that, that, that, that, would, would, that, that,inputSearch이치노

저는 최근에 같은 문제를 안고 이렇게 해결했습니다.가장 예쁘지는 않을 수도 있지만 몇몇이 선호할 수도 있다.서 ★★★★★ComponentName과 React 입니다.ExportName하다

const ComponentName = (props, ref) => {
  return (
    <div ref={ref}></div>
  );
};
export const ExportName = forwardRef(ComponentName);

import React from "react";

const Search = React.forwardRef<HTMLInputElement>(function Search(props, ref) {
  return <input ref={ref} type="search" />;
});

export default Search;

이렇게 하면 문제를 해결할 수 있습니다.왜 eslint가 글 쓰는 방법을 제한하는지 알아두는 게 좋을 것 같아

이름 있는 함수를 사용할 수 있습니다( 참조).function Search아래 예시와 같이 익명 화살표 fn 대신 )을 사용합니다.

const Search = React.forwardRef<HTMLInputElement>(function Search(props, ref) {
  return <input ref={ref} type="search" />;
});

export default Search;

Larsson의 답변(이것이 최선이라고 생각합니다)에 덧붙여, 타이핑이 필요한 경우는, 다음과 같은 조작을 실시할 수 있습니다.

import { forwardRef, ForwardRefRenderFunction } from "react";

type MyComponentProps = {
  something: string;
}

type RefProps = {
  something: string;
}

const MyComponent: ForwardRefRenderFunction<RefProps, MyComponentProps> = (props, ref) => {
  return <div>Works</div>;
}

export default forwardRef(MyComponent);

파일 시작 부분에 다음 내용을 입력합니다.

/* eslint-disable react/display-name */

것도 수 요.// eslint-disable-next-line react/display-name

여기에서는, 타입을 사용한 모든 회답에 대해 설명합니다.인터페이스를 갖춘 델의 솔루션은 다음과 같습니다.

import { Ref, forwardRef } from 'react';

interface Props {
    "foo": string
}

const Input = ({ foo }: Props, ref: Ref<HTMLInputElement>) => {
    return <input foo={foo} ref={ref} type="text" />;
};

export default forwardRef(Input);

저도 오늘 비슷한 문제가 있었어요.@fluentui의 Details List를 사용합니다.각 열에는 옵션 속성이 있습니다.onRender사용자 지정 구성 요소를 반환하여 데이터 형식을 지정할 수 있도록 현재 항목을 전달합니다.난 이런 걸 시도했어onRender: (item: PlannerTask) => <TitleColumn item={item} />이 때문에 오류가 발생했습니다.나는 나를 위해 그것을 고칠 두 가지 방법을 찾았다.

Varian 1: 아이에게 이름을 붙입니다.

onRender: function titleColumn (item: PlannerTask) { return <TitleColumn item={item} /> }

Variant 2(결국 내가 한 일):

컴포넌트 파일에서 컴포넌트를 반환하는 함수를 내보냅니다.

export const createTitleColumn = (item: PlannerTask): JSX.Element => {
    return <TitleColumn item={item} />
}

그럼 그냥 넘어가죠

onRender: createTitleColumn

결론

저는 이 변종이 너무 복잡하지 않고 개인적으로 두 번째 옵션도 읽기 쉽기 때문에 가장 좋아합니다.

제 경우 eslint 오류는 원래 코드에는 아무런 문제가 없기 때문에 잘못된 긍정이라고 생각합니다.다만, 보풀이나 컴파일러의 에러/규칙을 무효로 하는 것은 피하려고 합니다.이는 단순히 우리를 괴롭히는 것이 아니기 때문입니다.

이전 솔루션에서는 효과가 없었던 솔루션을 다음에 제시하겠습니다.

import React, { forwardRef, Ref } from 'react';
import { SliderItemContainer, SliderItemContent } from '../styles/SliderItem.styles';
import { SliderItemType } from '../utils/Slider.data';

type SliderItemProps = {
  item: SliderItemType;
};

const SliderItem = ({ item }: SliderItemProps, ref: Ref<HTMLDivElement>) => {
  return (
    <SliderItemContainer ref={ref} image={item.image}>
      <SliderItemContent>
        <h1>{item.title}</h1>
        <p>{item.description}</p>
        <button>{item.buttonText}</button>
      </SliderItemContent>
    </SliderItemContainer>
  );
};

export default forwardRef(SliderItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

컴포넌트 외부에서 사용하는 방법도 간단하며, MotionSliderItem이라는 이름의 SliderItem 컴포넌트를 모션으로 감았습니다.

const MotionSliderItem = motion(SliderItem);
<MotionSliderItem ..... />

언급URL : https://stackoverflow.com/questions/67992894/component-definition-is-missing-display-name-for-forwardref