React JS中map函数渲染表格时如何为每个tag标签值单独换行

核心修改思路 #

你只需要调整tags列的渲染逻辑，对tags数组做二次遍历，给每个tag单独包裹块级元素/添加换行符即可，同时要兼容部分数据无tags字段的场景，避免渲染报错。

修改后的代码片段 #

你只需要把原代码里tags对应的<td>部分替换为如下内容即可：

<td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0">
  <i className="fas fa-circle text-emerald-500 mr-2 align-top"></i>
  <div className="inline-flex flex-col gap-1">
    {Array.isArray(table.tags) 
      ? table.tags.map((tag, index) => <span key={index}>{tag}</span>)
      : '-'
    }
  </div>
</td>

补充说明 #

• 这里用inline-flex flex-col布局实现每个tag自动换行，你也可以根据需要调整间距、给tag加自定义样式美化
• 如果不想用flex布局，也可以在每个tag后加<br/>实现换行，写法如下：

<td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0">
  <i className="fas fa-circle text-emerald-500 mr-2"></i>
  {Array.isArray(table.tags) 
    ? table.tags.map((tag, index) => <span key={index}>{tag}<br/></span>)
    : '-'
  }
</td>

• 增加Array.isArray(table.tags)判断是为了处理没有tags字段的条目，避免渲染异常

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