以编程方式呈现 Redux 表单字段答案

【问题标题】：Render Redux Form fields programmatically以编程方式呈现 Redux 表单字段
【发布时间】：2019-11-12 12:12:30
【问题描述】：

我有一个关于 Redux 表单字段的问题。我只有一个要创建的简单表单，它只有一个 firstName 字段和一个 lastName 字段。

而不是写出两个字段的代码，例如：

<Field
  id="firstName"
  name="firstName"
  component={FormField}
  validate={this.myValidation}
  ...
/>

<Field
  id="lastName"
  name="lastName"
  component={FormField}
  validate={this.myValidation}
  ...
/>

既然它们如此相似，有没有办法以编程方式呈现这些字段？我之所以这么问，是因为还会有其他基本相同的字段，而且似乎有更好的方法来做到这一点，而不是像上面那样把它们都写出来。

希望我的问题有意义。只是希望尽可能保持代码 DRY，并让更少的代码做更多的事情。

感谢任何人提供的任何建议...

【问题讨论】：

标签： javascript reactjs redux jsx redux-form

【解决方案1】：

你可以声明一个字段渲染函数，例如：

...

renderField(name) {
  return (
    <Field
      id={name}
      name={name}
      component={FormField}
      validate={this.myValidation}
      ...
    />
  );
}

...

render() {
  return (
    <div>
      {this.renderField('firstName')}
      {this.renderField('lastName')}
      ...
    </div>
    ...
  );
}

...

【讨论】：

这正是我想要的！我想太多了，忽略了这种简单的解决方案。谢谢！
@Lushmoney 我很高兴它有帮助。我通常在我的项目中使用渲染方法。

【解决方案2】：

虽然这对于两个字段来说可能是多余的，但您也可以使用返回 React 组件数组的 map 函数。

render() {
    return(
        <div>
            {['firstName', 'lastName'].map((el) => {
                return(
                    <Field
                        id={el}
                        name={el}
                        component={FormField}
                        validate={this.myValidation}
                    />
                )
            })}
        </div>
}

或者，更进一步，您可以将其与 Sergey Denisov 的答案结合起来，并将创建组件的函数传递给 map。例如['firstName', 'lastName'].map((el) => this.renderField(el))

【讨论】：

【解决方案3】：

您正在按照应有的方式进行操作，您正在写出您想要的内容（声明这两个字段）。我认为没有任何理由将其进一步抽象出来。我知道这不是一个很好的答案，但有时不做事比花费额外的时间努力获得最小的收益要好。

【讨论】：