“ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>”类型上不存在属性“组”答案

【问题标题】：Property 'Group' does not exist on type 'ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>'“ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>”类型上不存在属性“组”
【发布时间】：2021-04-22 07:58:57
【问题描述】：

我正在尝试在广播和广播组上绑定一个反应挂钩表单。但是，我遇到以下问题

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

这是代码

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>
          );
        }}
      />
    </>
  );
}

我无法弄清楚为什么我会遇到这样的问题。如何在 Radio Group 上绑定 react-hook-form ？

【问题讨论】：

标签： javascript reactjs typescript antd react-hook-form

【解决方案1】：

Radio 变量的类型是一个反应组件，特别是ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>。您正在做的是添加另一个组件作为该组件的属性。 Typescript 抱怨这一点，因为 react 组件没有任何名为 Group 的属性的定义。

可以向我们的组件添加任意属性，但我们必须将它们告诉 typescript。

以下是来自 antd 包的类型：

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;

你可以看到Radio被声明为一个react组件和一个具有Group和Button属性的对象。

我不会写Radio.Group = ...，而是创建Group 作为它自己的组件：const Group = ...。然后在导出之前将两者组合在一起。

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

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

export default Compounded;

这里的关键部分是Radio as CompoundedType，它告诉打字稿将Compounded 的类型视为CompoundedType，即使还没有Group 属性。我们需要as 来覆盖打字稿的直觉。

【讨论】：