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

Posted 2023-02-22

【中文标题】以编程方式呈现 Redux 表单字段

【英文标题】：Render Redux Form fields programmatically

【发布时间】：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，并让更少的代码做更多的事情。

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

【参考方案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】：

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