类型“ForwardRefExoticComponent<InputProps &amp;"上不存在属性“Group"RefAttributes&lt;HTMLInputElement&gt;&gt;' [英] Property &#39;Group&#39; does not exist on type &#39;ForwardRefExoticComponent&lt;InputProps &amp; RefAttributes&lt;HTMLInputElement&gt;&gt;&#39;

问题描述

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

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 ?

推荐答案

Type for you Radio 变量是一个 react 组件，特别是 ForwardRefExoticComponent>.您正在做的是添加另一个组件作为该组件的属性.打字稿抱怨这一点，因为反应组件没有任何名为 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.

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

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

以下是来自 antd 包的类型:

Here are the typings from the antd package:

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 &amp;"上不存在属性“Group"RefAttributes&lt;HTMLInputElement&gt;&gt;'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！