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

Question

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

而不是像这样写出两个字段的代码：

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

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

既然它们如此相似，有没有办法以编程方式呈现这些字段？我问是因为会有其他字段本质上也是相同的，而且似乎有比像上面那样将它们每个都写出来更好的方法。

希望我的问题有道理。只是希望尽可能保持代码干燥，并让更少的代码做更多的事情。

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

Answer 1

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

Answer 2

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

...

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

...

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

...

Answer 3

虽然这对于两个字段来说可能有点矫枉过正，但您也可以使用 map 函数 returns 一个 React 组件数组。

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))

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

Render Redux Form fields programmatically

javascript

reactjs

redux

jsx

redux-form