使用 React-Hook-Forms 通过子组件传递方法答案

【问题标题】：Passing methods through child components using React-Hook-Forms使用 React-Hook-Forms 通过子组件传递方法
【发布时间】：2021-09-06 19:14:56
【问题描述】：

我正在尝试在我的子组件中使用register() 方法。但我收到一个打字稿错误说：Expected 1-2 arguments, but got 0.

我假设我错误地传递了 register 方法？

父组件

type FormValues = {
  projectType: string;
};

const Parent = () => {
  const {
    register,
  } = useForm<FormValues>({ mode: 'all' });
  return (
    <Container>
      <FormBlock id="form">
        <fieldset>
          <ChildComponent props={register()}/>
        </fieldset>
      </FormBlock>
    </Container>
  );
};

子组件

const ChildComponent = ({ props }) => {
  return (
    <InputField {...props.register('projectType')}></InputField
  );
};

【问题讨论】：

在父组件中，您的代码试图调用注册函数并将返回值作为道具传递，而不是将函数本身作为道具传递。
正确传递它的最佳方法是什么？使用this.register?
通过调用register，您不是将函数传递给ChildComponent，而是返回值。此外，您不会将道具 props 传递给组件。提供给ChildComponent 的参数已经是道具并被包装到一个对象中。只要通过register={register}。

标签： reactjs typescript react-functional-component react-hook-form

【解决方案1】：

您必须将以下行更新为：

<ChildComponent props={register} />

你不应该打电话给register，你必须去掉括号

编辑：感谢卡尔文

您必须编辑组件：

<InputField {...props('projectType')}></InputField>

将props 重命名为register 更简洁

<ChildComponent register={register} />

// Field
<InputField {...register('projectType')}></InputField>

【讨论】：

我将register() 更改为register。但是我在子组件中的 props 参数有一个错误。尝试做(props) 或({props}) 但我得到：Parameter 'props' implicitly has an 'any' type.。这是因为我通过一个方法造成的问题吗？
您可能应该将其传递为<ChildComponent props={{register}} />，以便<ChildComponent> 传递一个名为register 的道具。在<ChildComponent> 中，您应该添加<ChildComponent> 的prop 对象的类型（具有称为register 的属性的对象）。
另外，当像这样在函数的参数列表中使用花括号时，你是 destructuring 函数的第一个参数并从中检索一个名为 props 的属性。因此，要从传入的 props 中获取 register，您可以使用 ({register}: ChildComponentProps)。