итерация метода map в степпере для пользовательского интерфейса материала

Question

• Я пытаюсь добавить излишнюю форму внутри моего степпера.
• но проблема в том, если я добавлю поля формы внутри отражающего во всех трех местах.
• поэтому я начал отлаживать шаговый код.
• обнаружили, что они повторяются в методе карты.
• так что я подумал на основе условия if для label я покажу теги div и form.
• но он не работает.
• подскажите, как это исправить.
• так что в будущем я сам исправлю.
• предоставив мой фрагмент кода и песочницу ниже

https://codesandbox.io/s/y2kjpl343z

return (
      <div className={classes.root}>
        <Stepper activeStep={activeStep} orientation="vertical">
          {steps.map((label, index) => {
            console.log("steps---->", steps);
            console.log("label---->", label);
            console.log("index---->", index);

            // if (index === 0) {
            if (label === "Select campaign settings") {
              return (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                  <StepContent>
                    <Typography>{getStepContent(index)}</Typography>
                    <div className={classes.actionsContainer}>
                      <div>
                        <div>test1</div>

                        <form>here</form>

                        <Button
                          disabled={activeStep === 0}
                          onClick={this.handleBack}
                          className={classes.button}
                        >
                          Back
                        </Button>
                        <Button
                          variant="contained"
                          color="primary"
                          onClick={this.handleNext}
                          className={classes.button}
                        >
                          {activeStep === steps.length - 1 ? "Finish" : "Next"}
                        </Button>
                      </div>
                    </div>
                  </StepContent>
                </Step>
              );
            }

            if (label === "Create an ad group") {
              return (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                  <StepContent>
                    <Typography>{getStepContent(index)}</Typography>
                    <div className={classes.actionsContainer}>
                      <div>
                        <div>test1</div>

                        <form>here</form>

                        <Button
                          disabled={activeStep === 0}
                          onClick={this.handleBack}
                          className={classes.button}
                        >
                          Back
                        </Button>
                        <Button
                          variant="contained"
                          color="primary"
                          onClick={this.handleNext}
                          className={classes.button}
                        >
                          {activeStep === steps.length - 1 ? "Finish" : "Next"}
                        </Button>
                      </div>
                    </div>
                  </StepContent>
                </Step>
              );
            }

            // return (
            //   <Step key={label}>
            //     <StepLabel>{label}</StepLabel>
            //     <StepContent>
            //       <Typography>{getStepContent(index)}</Typography>
            //       <div className={classes.actionsContainer}>
            //         <div>
            //           <div>test1</div>

            //           <form>here</form>

            //           <Button
            //             disabled={activeStep === 0}
            //             onClick={this.handleBack}
            //             className={classes.button}
            //           >
            //             Back
            //           </Button>
            //           <Button
            //             variant="contained"
            //             color="primary"
            //             onClick={this.handleNext}
            //             className={classes.button}
            //           >
            //             {activeStep === steps.length - 1 ? "Finish" : "Next"}
            //           </Button>
            //         </div>
            //       </div>
            //     </StepContent>
            //   </Step>
            // );
          })}
        </Stepper>
        {activeStep === steps.length && (
          <Paper square elevation={0} className={classes.resetContainer}>
            <Typography>All steps completed - you&apos;re finished</Typography>
            <Button onClick={this.handleReset} className={classes.button}>
              Reset
            </Button>
          </Paper>
        )}
      </div>
    );

Answer 1

Вот рабочие коды и коробка: https://codesandbox.io/s/6l3wpo3xyr

Мне кажется, что работает правильно и с понятным кодом. Это можно сделать немного лучше, но для начала все может быть хорошо.

Я могу отредактировать ответ, чтобы добавить детали, если это необходимо.

Ответ на комментарий о Object.entries

В качестве переменной экземпляра для компонента, который я объявил:

steps = {
  "Select campaign settings": Step1,
  "Create an ad group": Step2,
  "Create an ad": Step3
};

Это просто обычный объект Javascript. В ES6 класс Object имеет метод entry, который, принимая объект, подобный этому, возвращает массив, массив ключей и значений данного объекта. В этом случае:

Object.entries(steps)

[
  [ "Select campaign settings", Step1 ],
  [ "Create an ad group", Step2 ],
  [ "Create an ad", Step3 ]
]

Имея такую ​​структуру, проще отобразить пары ключ-значение с помощью map. Первый аргумент метода map класса Array является текущим элементом массива. Использовав Object.entries ранее, элемент является единственным массивом, который представляет пару ключей:

Object.entries(steps)[0]  // [ "Select campaign settings", Step1 ]

Ответ на комментарий о .map(([ label, CustomStep ]) => ...

Это просто обычное использование метода Array.map. Как правило, это позволяет преобразовать массив в другой, используя функцию отображения. Функция, которая берет элемент массива и возвращает другую вещь.

В этом случае элементом массива для цикла является пара ключ-значение, предоставляемая вызовом Object.entries. С помощью ES6 массивы, как и объекты, могут быть деструктурированы, и вот что там происходит:

// you may see something like this around:
.map(element => {
  // let's say that element is an array, you'll use it like:
  // element[0] is the first element
  // element[1] is the second one
})

// with ES6 that array can be destructed on-the-fly this way, which is totally equivalent
.map(([ label, CustomStep ]) => {
  // label is the index 0 (element[0])
  // CustomStep is the index 1 (element[1])
})