如何在React中将数组的元素一个映射到另一个，而不是并排映射

Question

我有一个名为formulas的数组，我正在尝试映射它。然而，包括在地图完成后渲染的按钮在内的所有元素都并排出现，而不是一个在另一个下面：

映射代码：

<div style={{ width: "67%" }}>
{showFormulas && (
<WidgetContainer
maxHeight={"40vw"}
style={{
width: "80vw",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{formulas.map((form, index) => {
return (
<div>
<div
style={{
border: "2px",
borderStyle: "solid",
}}
>
hi //gets rendered side by side
</div>
</div>
);
})}

<button onClick={() => this.addFormula()}> Create New Formula</button> //omitted style for reducing code
</WidgetContainer>
)}
</div>

这就是styles.js 中WidgetContainer的样子

export const WidgetContainer = styled.div`
background-color: white;
border-radius: 24px;
padding: 20px;
margin-bottom: 20px;
position: relative;
`;

如何将它们一个放在另一个下面？

Answer 1

您正在指定display到flex，这就是为什么您将它们并排放置的原因。您可以移除显示器flex或将flex-direction设置为column。