从组件数组中有条件地呈现组件
从组件数组中有条件地呈现组件
提问于 2022-04-21 13:10:28
我有3张卡片，我想渲染在屏幕上，所有类似的布局。当我们有一个作为值的组件时，这个模式被称为什么？
const steps = [
{
label: "Order details",
component: OrderDateStep,
},
{
label: "Driver details",
component: OrderDriverStep,
},
{
label: "Acknowledgements",
component: OrderAcknowledgementStep,
},
];此外，当有条件地呈现这些内容时，我一直会遇到问题。我想等到条纹初始化后才显示表单。但是，我得到一个错误Error: Rendered more hooks than during the previous render.。我知道我可以只添加不同的组件，但这并不是很好的可伸缩性。还有其他方法可以实现这种可重用的模式，而不会因为钩子数量的变化而遇到这个问题吗？为什么使用stepx.component()会改变钩子的数量，而仅仅使用组件就不改变了呢？
{stripe && (
<Elements
stripe={stripe}
options={{
clientSecret: paymentIntent?.client_secret,
}}
>
{steps.map((step, index) => {
return (
<Box
key={step.label}
sx={{
mt: 3,
}}
>
<Box sx={{ my: 2 }}>
<Typography variant="h5">{step.label}</Typography>
</Box>
{step.component()}
</Box>
);
})}
<Box sx={{ display: "flex", justifyContent: "end" }}>
<Button variant="contained" onClick={submitForm}>
Submit
</Button>
</Box>
</Elements>
)}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71955081
复制相关文章
相似问题
腾讯云开发者
