如何在React的map函数中使用条件逻辑按show值渲染UI

云上老周

2026-8-27

实现方案

两种常用写法，按需选择即可：

map内联判断
直接在map的回调里加判断，show === 1就返回你要渲染的UI，否则返回null就行，React渲染null不会生成任何DOM节点。
参考代码：

render() {
  return (
    {/* 其余原有代码保持不变 */}
    {this.state.editableRowData.components.map((c, i) => (
      <React.Fragment key={c.url || i}>
        {c.show === 1 ? (
          // 替换成你实际要渲染的UI结构，示例如下
          <div className="comp-item">
            <a href={c.url}>{c.name}</a>
            <span className="comp-type">{c.type}</span>
          </div>
        ) : null}
      </React.Fragment>
    ))}
    {/* 其余原有代码保持不变 */}
  );
}

避坑提醒：别偷懒写{c.show && <UI/>}，当show值为0的时候，React会把数字0直接渲染到页面上，必须显式写c.show === 1做全等判断。另外你代码里写的空标签<>是React.Fragment的简写，简写形式不能传key属性，如果要给片段加key得写完整的<React.Fragment key={xxx}>。

先过滤再渲染
如果你不需要保留原数组的索引对应关系，更推荐先把要展示的项筛出来再map，代码更干净，少一层判断，性能也更好：

render() {
  // 先筛掉所有不需要展示的项
  const visibleComponents = this.state.editableRowData.components.filter(item => item.show === 1);
  return (
    {/* 其余原有代码保持不变 */}
    {visibleComponents.map((c) => (
      // 这里直接写UI就行，进来的全是要展示的项
      <div className="comp-item" key={c.url}>
        <a href={c.url}>{c.name}</a>
        <span className="comp-type">{c.type}</span>
      </div>
    ))}
    {/* 其余原有代码保持不变 */}
  );
}