제네릭 타입의 기능적인 리액트 구성 요소를 만드는 방법은 무엇입니까?

제네릭 타입의 기능적인 리액트 구성 요소를 만드는 방법은 무엇입니까?

나는 프로프 타입의 일부가 될 제네릭 타입 파라미터를 사용하는 React 구성요소를 만들려고 합니다.

다음과 같은 솔루션을 원합니다.

interface TestProps<T> {
  value: T;
  onChange: (newValue: T) => void;
}

const Test: React.FC<TestProps<T>> = (props) => (
  <span>{props.value}</span>
);

저는 TypeScript 2.9에서 이것에 대한 지원이 있다는 것을 보았고 저는 4.3.5에 있습니다.

사용 방법은 다음과 같습니다.

const Usage: React.FC = () => (
  <div>
    <Test<Obj>
      value={{ name: 'test' }}
      onChange={(newValue) => {
        console.log(newValue.name);
      }}
    />
  </div>
);

코드 샌드박스: https://codesandbox.io/s/react-typescript-playground-forked-8hu13?file=/src/index.tsx

다시 작성해야 합니다.Test이런 식으로 구성 요소

const Test= <T,>(props:TestProps<T>) => (
    <span>Some component logic</span>
);

리액트에서도 똑같이 보여줄 수 있나요?FC <테스트 제안>?으로 하는 것은 불가능합니다.FC.

이것은FC구현:

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  // ... other static properties
}

눈치채셨겠지만,FC도구 유형이 아니라 함수 유형입니다.

갱신하다

더 높은 주문 기능을 만들 수는 있지만, 그럴 만한 가치가 있는지 모르겠습니다.

const WithGeneric = <T,>(): React.FC<TestProps<T>> =>
  (props: TestProps<T>) => (
    <span>Some component logic</span>
  );
const Test = WithGeneric<Obj>()

가장 쉬운 방법은 일반 FC를 화살표 기능이 아닌 일반 FC로 만드는 것입니다.(React.PropsWithChildren<>에뮬레이트하는 것React.FC당신에게 하는 일propstype.)

function Test<T>(props: React.PropsWithChildren<TestProps<T>>) {
    return <span>Some component logic</span>;
}

제 경우에는 다음 코드와 같았습니다.

export interface FormProps<T> {
  validator?: AnyObjectSchema;
  onSubmit?: (data: T) => void;
}

const Form = <T = any,>({
  children,
  validator,
}: PropsWithChildren<FormProps<T>>): JSX.Element => {
  ~~~

사용 중:

type MyType = ...

<Form<MyType>
  validation={something}
  onSubmit={handleSomething}
>
  <SomeCompo />
  <AnotherSomeCompo />
</Form>

언급URL : https://stackoverflow.com/questions/68757395/how-to-make-a-functional-react-component-with-generic-type