材质 ui 步进器中的映射方法迭代

IT技术 javascript css reactjs redux material-ui
2021-05-07 05:25:11
  • 我正在尝试在我的步进器中添加 redux 表单。
  • 但问题是如果我在所有三个地方的反射中添加表单字段。
  • 所以我开始调试步进器代码。
  • 发现他们在 map 方法中迭代。
  • 所以我想在为标签设置 if 条件的基础上，我将显示 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>
    );
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])
})
其它你可能感兴趣的问题
上一篇斜坡 1.4 1.8 步进电机挤压计算 下一篇将 MakerBot Replicator 1 dual（或像 FlashForge Creator 一样克隆）与 Cura 结合使用