类型'ForwardRefExoticComponent< InputProps&RefAttributes< HTMLInputElement>>' [英] Property 'Group' does not exist on type 'ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>'

问题描述

我正在尝试在radio和radio group上绑定一个react hook表单.但是，我遇到以下问题

I am trying to bind a react hook form on radio and radio group. However, I get following issue

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?

I could not figure out why I am getting such issue. How can I bind react-hook-form on Radio Group ?

推荐答案

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

The type for you Radio variable is a react component, specifically ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>. What you are doing is adding another component as a property on this component. Typescript complains about that because a react component doesn't have any definition for a property called Group.

可以向我们的组件添加任意属性，但是我们必须告诉打字稿它们.

It is possible to add arbitrary properties to our component, but we have to tell typescript about them.

以下是 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 属性的对象.

You can see that Radio is declared as both a react component and an object with properties Group and Button.

代替编写 Radio.Group = ... ，我将创建 Group 作为它自己的组件: const Group = ... .然后将两者结合在一起，最后再导出.

Instead of writing Radio.Group = ... I would create the Group as it's own component: const Group = .... Then combine the two together at the end before exporting.

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 覆盖打字稿的直觉.

The critical part here is Radio as CompoundedType which tells typescript to treat the type for Compounded as CompoundedType even though there is no Group property yet. We need the as to override typescript's instincts.

这篇关于类型'ForwardRefExoticComponent< InputProps&RefAttributes< HTMLInputElement>>'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！