我試圖div在單擊按鈕時添加一個子組件（div-row 內的 div-col）。就像在這里，我試圖將卡片的方向從網格更改為串列視圖。我在這里使用引導程式內置類。
如果是grid view，那么
<div className="row">
{notes.map((item, key) => {
return <Noteitem />;
})}
</div>
如果listview按鈕被點擊
<div className="row">
<div className="col">
{notes.map((item, key) => {
return <Noteitem />;
})}
</div>
</div>
我是否需要分別為兩者使用回傳 DOM？？或者也歡迎任何其他方法。
uj5u.com熱心網友回復：
創建狀態myView并將默認設定為 'GridView' listView 按鈕被點擊，setState 為 'ListView'。
使用這種狀態，渲染像
{
myView === "GridView" ? (
<div className="row">
{notes.map((item, key) => {
return <Noteitem />;
})}
</div>
) : (
<div className="row">
<div className="col">
{notes.map((item, key) => {
return <Noteitem />;
})}
</div>
</div>
);
}
uj5u.com熱心網友回復：
類似于@Bee 的回答，但更簡潔和充實：
const [grid, setGrid] = useState(false)
return (
<button onClick={() => setGrid(!grid)} />
<div className="row">
<div className={grid ? "col" : ""}>
{notes.map((item, key) => {
return <Noteitem />;
})}
</div>
</div>
)
解釋
您將div元素保留在DOM 上，只需更改classNameto 和 fromcol或 null 即可。使用onClick按鈕上的屬性來打開和關閉網格視圖。將狀態值保留為布林值，以便您可以使用三元運算子直接參考其真/假值以將className值分配給div.
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333487.html
標籤：javascript html css 反应 bootstrap-4
上一篇：根據陣列的字串值（Javascript）從陣列中查找唯一值
下一篇：Next.js影像樣式通過css