我有一個用例在反應中并排并行渲染兩個串列。
輸入：
清單 1：[A、B、C] 清單 2：[X、Y、Z]
預期輸出（A、B、C 左對齊，X、Y、Z 右對齊）：
A X
B Y
C Z
在我只看到遍歷單個串列的情況之前，有人可以幫忙舉一個可以遍歷兩個串列的例子嗎？
謝謝
uj5u.com熱心網友回復：
有幾種方法可能是合適的，我可能會選擇 flex-box 方法。您可以在帶有 flex-direction 列的 flex-box 內渲染每個串列。然后你可以將兩個串列放在另一個具有 flex-direction 行的 flex-box 中：
export default function App() {
const list1 = ["A", "B", "C"];
const list2 = ["X", "Y", "Z"];
return (
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ display: "flex", flexDirection: "column" }}>
{list1.map((item) => (
<div>{item}</div>
))}
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
{list2.map((item) => (
<div>{item}</div>
))}
</div>
</div>
);
}
您也可以稍微簡化一下：
function List(props) {
return (
<div style={{ display: "flex", flexDirection: "column" }}>
{props.list.map((item) => (
<div>{item}</div>
))}
</div>
);
}
export default function App() {
const list1 = ["A", "B", "C"];
const list2 = ["X", "Y", "Z"];
return (
<div style={{ display: "flex", flexDirection: "row" }}>
<List list={list1} />
<List list={list2} />
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521536.html
上一篇：為什么在useState中設定值后我不能更改輸入值|反應
下一篇：反應路由器中的單個組件負載