在React中基于两个数组实现同单元格展示图片与名称的表格

你当前的写法是分别遍历names和imgs两个数组生成独立的两行，自然会出现名称和图片上下分行展示的问题。只需遍历一次数组，用同一个索引同时取出对应位置的名称和图片，放在同一个单元格内即可实现需求。
前提是两个数组长度一致、相同索引下的值一一对应：

<table className="table">
  <tbody>
    <tr>
      {this.state.names.map((name, i) => {
        return (
          <td key={i}>
            <div>{name}</div>
            <img className="style" src={this.state.imgs[i]} alt={name} />
          </td>
        );
      })}
    </tr>
  </tbody>
</table>

补充说明 #

• 给img的alt属性填充对应物品名称，更符合无障碍开发规范
• 若不确定两个数组长度是否一致，可以先增加长度校验逻辑，避免索引越界报错
• 可以给单元格内的名称和图片外层加自定义样式类，调整间距、对齐方式等排版效果

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