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're finished</Typography> <Button onClick={this.handleReset} className={classes.button}> Reset </Button> </Paper> )} </div> );
这是一个有效的codeandbox: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
Object.entries(steps) [ [ "Select campaign settings", Step1 ], [ "Create an ad group", Step2 ], [ "Create an ad", Step3 ] ]
具有这样的结构,使用映射键值对更加容易map。类map方法的第一个参数Array是数组的当前元素。Object.entries前面已经使用过,元素是表示密钥对的单个数组:
map
Array
Object.entries(steps)[0] // [ "Select campaign settings", Step1 ]
.map(([ label, CustomStep ]) => ...
这只是该Array.map方法的常用用法。通常,它允许使用映射功能将数组转换为另一个数组。该函数接受数组的元素并返回另一件事。
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]) })