ReactJS点击按钮新增子div组件 实现Bootstrap网格与列表视图切换

不需要编写两份重复的DOM返回逻辑，有两种更简洁易维护的实现方案可选：

方案1：条件渲染包裹层（适配需要调整DOM嵌套结构的场景） #

你只需要通过视图状态判断是否渲染col包裹层即可，无需重复写列表遍历逻辑：

// 先定义控制视图的状态，点击按钮时切换该状态即可
const [isListView, setIsListView] = useState(false);

// 渲染逻辑
<div className="row">
  {isListView ? (
    <div className="col">
      {notes.map((item, key) => <Noteitem key={key} item={item} />)}
    </div>
  ) : (
    notes.map((item, key) => <Noteitem key={key} item={item} />)
  )}
</div>

方案2：仅通过Bootstrap类名切换（更推荐，性能更优） #

不需要修改DOM嵌套结构，直接通过不同视图下的列类控制卡片宽度即可实现切换，渲染开销更低，代码无冗余：

const [isListView, setIsListView] = useState(false);
// 网格视图可根据需求自定义列宽，比如col-md-4一行放3个，col-sm-6小屏一行放2个
const colClass = isListView ? 'col-12' : 'col-md-4 col-sm-6';

<div className="row">
  {notes.map((item, key) => (
    <div key={key} className={colClass}>
      <Noteitem item={item} />
    </div>
  ))}
</div>

如果你的Noteitem组件本身支持传入className属性，可以直接把colClass传给组件，无需额外加外层div。

注意：map遍历渲染子组件时请补充唯一key属性，避免React抛出语法告警。

内容的提问来源于stack exchange，提问作者MagnusEffect