Визуализация полей формы Redux программным способом - PullRequest
3 голосов
/ 02 июля 2019

У меня вопрос о полях Redux Form. У меня есть просто простая форма, которую я хочу создать, и она имеет только поле firstName и поле lastName.

Вместо того, чтобы писать код для обоих полей, например:

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

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

Поскольку они очень похожи, есть ли способ программно визуализировать эти поля? Я спрашиваю, потому что будут дополнительные поля, которые также по сути одинаковы, и кажется, что есть лучший способ сделать это, чем записать их каждое, как указано выше.

Надеюсь, мой вопрос имеет смысл. Просто старайтесь, чтобы код был максимально СУХИМ, и чтобы меньший код делал больше.

Спасибо за любые предложения, которые кто-нибудь может предложить ...

Ответы [ 3 ]

2 голосов
/ 02 июля 2019

Вы можете объявить функцию визуализации поля, например:

...

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

...

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

...
1 голос
/ 02 июля 2019

Хотя это, вероятно, излишне для двух полей, вы также можете использовать функцию map, которая возвращает массив компонентов React.

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

Или, если пойти еще дальше, вы можете объединить это с ответом Сергея Денисова и передать функцию для создания компонента в этом map.например, ['firstName', 'lastName'].map((el) => this.renderField(el))

0 голосов
/ 02 июля 2019

Вы делаете это так, как должно быть, вы пишете, что хотите (объявляя эти два поля). Я не вижу смысла абстрагироваться дальше Я знаю, что это не очень хороший ответ, но иногда не делать что-то лучше, чем тратить дополнительное время на минимальные выгоды.

...