Как добавить DIV при отображении объекта состояния в React, чтобы разрешить добавление DIV по мере необходимости

Question

Как добавить DIV при отображении объекта состояния в React, чтобы разрешить добавление DIV по мере необходимости

Посмотрите на код:

Вы можете просто создать функцию и позволить ей выполнять работу для вас, своего рода функциональный стиль!

Function<Person, List<Object>> compositeKey = personRecord ->
    Arrays.<Object>asList(personRecord.getName(), personRecord.getAge());

Теперь вы можете использовать это как карта:

Map<Object, List<Person>> map =
people.collect(Collectors.groupingBy(compositeKey, Collectors.toList()));

Приветствия!

0

javascript reactjs mapping

задан Tayyab Rahman 3 March 2019 в 22:11

1 ответ

Другие вопросы по тегам:

javascript reactjs mapping

Похожие вопросы:

score 0 · Answer 1

Вы можете добавить еще один elementType «group», где вы можете передавать входные данные как свойство элемента и проходить через них в вашем компоненте RegistrationFormTemplate.

class SignupStateNavigation extends React.Component {
  state = {
    step: 1,
    signupForm: {
      // OTHER INPUTS
      anotherInput: {
        value: 'anotherInput',
      },
      // NEW TYPE OF ELEMENT
      groupOne: {
        elementType: 'group',
        // PASS YOUR INPUTS HERE
        inputs: {
          firstName: {
            value: 'firstName'
          },
          lastName: {
            value: 'lastName'
          },
        }
      }
    }
  };

  render () {
    const inputs = this.state.signupForm;

    let form = (
      <form onSubmit={this.inputChangedHandler}>
        <React.Fragment>
          {Object.keys(inputs).map(function(key) {                   
            return <SignupFormTemplate key={key} {...inputs[key]} />
          })}
        </React.Fragment>
      </form>
    );

    return (
      <div className='form-wrapper'>
        <div className='input-styler'>
          {form}
        </div>
      </div>
    );
  }
}

Затем используйте новый элемент 'group' elementType в вашем компоненте RegistrationFormTemplate.

const SignupFormTemplate = (props) => {
  const elementType = props.elementType;
  let inputElement;

  switch ( elementType ) {
    case ( 'group' ):
      // IF OF TYPE GROUP LOOP THROUGH INPUTS AGAIN
      const inputs = props.inputs;

      inputElement = (
        <div className="input_group">
          {Object.keys(inputs).map(function(key) {
            return <SignupFormTemplate key={key} {...inputs[key]} />
          })}
        </div>
      )

      break;

    default:
      inputElement = <input value={props.value} />;
  }

  return (
    <div className='input_signup'>
      {inputElement}
    </div>
  );
};

Рабочая скрипка: https://jsfiddle.net/f9h03y1z/8/