Question

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

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

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

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

由于它们是如此相似，是否有办法以编程方式呈现这些字段？我问，因为还会有其他基本相同的字段，而且似乎比上面的每个字段写出来的方法更好。

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

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

Answer 1

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

...

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

...

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

...

Answer 2

虽然这对于两个字段来说可能是多余的，但您也可以使用map函数来返回一个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))

Answer 3

您正在按照应做的方式进行操作，正在编写所需的内容（声明这两个字段）。我认为没有任何理由可以进一步对此进行抽象。我知道这并不是一个答案，但是有时候不做任何事情总比花费额外的时间来获取最小的收益要好。

以编程方式渲染Redux Form字段

3 个答案: