javascript - Egenskapen 'Group' eksisterer ikke på typen 'ForwardRefExoticComponent>'

Jeg prøver å binde et React Hook Form til radio og radiogruppe. Imidlertid får jeg følgende problem

Property 'Group' does not exist on type 'ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>'.  TS2339

Dette er koden

import { Radio as $Radio } from 'antd';
import { RadioProps, RadioChangeEvent } from 'antd/lib/radio';

import { Controller } from 'react-hook-form';
import { InputProps } from './types';

const Radio = React.forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref) => {
  const { id, name, label, control } = props;
  return (
    <>
      <Controller
        name={name}
        control={control}
        render={(controlProps: RadioProps) => {
          const { onChange } = controlProps;
          return (
            <$Radio
              {...controlProps}
              id={id}
              checked={controlProps.value}
              value={controlProps.value}
              className="radio"
            >
              {label}
            </$Radio>
          );
        }}
      />
    </>
  );
});

export default Radio;

Radio.Group = (props: InputProps) => {
  const { id, name, label, control } = props;
  return (
    <>
      <Controller
        name={name}
        control={control}
        render={(controlProps: RadioProps) => {
          const { onChange } = controlProps;
          return (
            <$Radio.Group
              {...controlProps}
              id={id}
              checked={controlProps.value}
              value={controlProps.value}
              className="radio"
            >
              {label}
            </$Radio.Group>
          );
        }}
      />
    </>
  );
}

Jeg klarte ikke å finne ut hvorfor jeg får et slikt problem. Hvordan kan jeg binde react-hook-form til Radio Group?

Svar #1

Typen for din Radio-variabel er en React-komponent, spesifikt ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>. Det du gjør er å legge til en annen komponent som en egenskap på denne komponenten. TypeScript klager på det fordi en React-komponent ikke har noen definisjon for en egenskap kalt Group.

Det er mulig å legge til vilkårlige egenskaper til komponenten vår, men vi må fortelle TypeScript om dem.

Her er typene fra antd-pakken:

interface CompoundedComponent extends React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLElement>> {
    Group: typeof Group;
    Button: typeof Button;
}
declare const Radio: CompoundedComponent;
export { Button, Group };
export default Radio;

Du kan se at Radio er deklarert både som en React-komponent og som et objekt med egenskapene Group og Button.

I stedet for å skrive Radio.Group=... ville jeg laget Group som sin egen komponent: const Group=.... Deretter kombinerer du de to sammen på slutten før du eksporterer.

type CompoundedType = typeof Radio & {
  Group: typeof Group;
}

const Compounded = Radio as CompoundedType;
Compounded.Group = Group;

export default Compounded;

Den kritiske delen her er Radio as CompoundedType som forteller TypeScript å behandle typen for Compounded som CompoundedType selv om det ikke finnes noen Group-egenskap ennå. Vi trenger as for å overstyre TypeScripts instinkter.

Relaterte artikler