在ReactJS中如何从图片数组中渲染指定badge_id的单张图片

解决方案 #

你可以用数组的find()方法直接匹配badge_id为2的目标项，再渲染对应图片即可，不需要遍历全部数组。

修改后的完整代码 #

import React from "react";

const BADGE = [
  {
    badge_id: 1,
    img : "/assets/mem.png",
  },
  {
    badge_id: 2,
    img : "/assets/member-ship.png",
  },
  {
    badge_id: 3,
    img : "/assets/silver.png",
  },
  {
    badge_id: 4,
    img : "/assets/gold.png",
  },
];

export default class ProductDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    // 查找badge_id为2的目标徽章
    const targetBadge = BADGE.find(item => item.badge_id === 2);
    return (
      <table>
        <tr>
          <td>
            {/* 先判断目标项是否存在，避免报错 */}
            {targetBadge && <img src={targetBadge.img} alt="会员徽章"/>}
          </td>
        </tr>
      </table>
    );
  }
}

说明 #

• Array.find()会遍历数组返回第一个满足判断条件的元素，正好符合查找单个指定项的需求
• 渲染前加targetBadge &&的判断是为了避免数组修改后找不到对应id时报错，提升代码健壮性
• 建议给img标签加上alt属性，符合前端规范也能提升无障碍访问体验

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