在 React 中重用表单组件的最佳方式是什么？答案

【问题标题】：What is the best way to reuse form components in React?在 React 中重用表单组件的最佳方式是什么？
【发布时间】：2021-11-01 01:23:51
【问题描述】：

我的应用中有大约 20 个表单，其中大多数都包含类似的输入字段。单个表单看起来像这样。

<form>
  <div>
    <input name="first_name" />
    <error />
  </div>
  <div>
    <input name="last_name" />
    <error />
  </div>
  <div>
    <input name="phone" />
    <error />
  </div>
  <div>
    <input name="address" />
    <error />
  </div>
</form>

first_name, last_name 字段可以归类为常见的输入组，适用于大多数表单。 电话和地址组也有多种形式。同样，也有一些常见的输入组。

我正在尝试重新使用常见的。并找到了两种方法。

将常用字段包装到组件中

这将是这样的

<form>
  <SectionOne />
  ...
</form>

const SectionOne = () => {
  return (
    <>
      <div>
        <input name="first_name" />
        <error />
      </div>
      <div>
        <input name="last_name" />
        <error />
      </div>
    </>
  )
}

换行输入和错误

这将是这样的

<form>
  <Input 
    ....
  />
  <Input 
    ....
  />
  ...
</form>

const Input = () => {
  return (
    <div>
      <input name="first_name" />
      <error />
    </div>
  )
}

我想知道从长远来看，在构建可重复使用的应用程序时，哪个是最佳实践而不会重复。

如果我缺少任何其他我想知道的最佳实践。

输入是指文本框、选择、单选按钮等。

【问题讨论】：

标签： reactjs forms reusability code-duplication

【解决方案1】：

创建纯组件

const Input = inputs => inputs.map(input => ( <><input name={input} /> <error/></>))

在某处重复使用它

<Input inputs={['first_name', 'last_name']} />

【讨论】：

我认为这不是一个好习惯。对于选择、单选按钮等不可扩展。