如何解决材质ui的stepper中的map方法迭代
这是一个有效的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.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])
})
解决方法
- 我正在尝试在步进器中添加redux表单。
- 但是问题是,如果我在其中反映所有三个位置的表单字段中添加表单字段。
- 所以我开始调试步进代码。
- 发现他们正在使用map方法进行迭代。
- 所以我认为在放置标签条件的基础上,我将显示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're finished</Typography>
<Button onClick={this.handleReset} className={classes.button}>
Reset
</Button>
</Paper>
)}
</div>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。