在button click (ReactJS)上添加一个子' div '组件

Question

我试图在单击按钮时添加子div组件(div- row内部的div-col)。就像这里，我试图改变牌的方向从网格到列表视图。我在这里使用的是bootstrap内置类。

如果是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吗??或者也欢迎其他方法。

Answer 1

创建状态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>
);
}

Answer 2

类似于@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上，并将className更改为col或为空。使用按钮上的onClick属性来切换网格视图的打开和关闭。将状态值保持为布尔值，以便您可以使用三元运算符直接引用其真/假值，将className的值赋给div。