React中如何为动态数组的平台ID元素绑定对应的react-icon图标

步骤1：定义平台ID与图标的映射关系 #

首先导入你需要用到的所有react-icon图标，再创建一个常量映射表，把平台ID作为键，对应图标作为值存储。

// 导入所需图标
import { FaPlaystation, FaXbox, FaSteam, FaNintendoSwitch } from 'react-icons/fa'

// 平台ID-图标映射表，按照你的实际ID对应关系补充
const PLATFORM_ICON_MAP = {
  2: <FaPlaystation />,
  3: <FaXbox />,
  5: <FaSteam />,
  7: <FaNintendoSwitch />,
  // 其他ID按需补充
}

如果你需要统一给所有图标传参数（比如大小、颜色），也可以把映射的值存为组件本身，渲染时再传参，灵活度更高：

const PLATFORM_ICON_COMPONENT_MAP = {
  2: FaPlaystation,
  3: FaXbox,
  // 其他ID按需补充
}

步骤2：在组件中渲染图标 #

不需要额外提取ID数组，直接遍历你拿到的plat props即可，匹配到对应图标就渲染：

方案A（用提前实例化的图标映射） #

function GameCard({ plat }) {
  return (
    <div className="game-card">
      {/* 其他卡片内容 */}
      <div className="platform-icon-group">
        {plat.map(item => {
          const platformId = item.platform.id
          const targetIcon = PLATFORM_ICON_MAP[platformId]
          // 没有对应图标的ID可以选择不渲染，或者渲染默认占位图标
          return targetIcon ? (
            <span key={platformId} className="icon-wrapper">
              {targetIcon}
            </span>
          ) : null
        })}
      </div>
    </div>
  )
}

方案B（用组件映射，可统一传参） #

function GameCard({ plat }) {
  return (
    <div className="game-card">
      {/* 其他卡片内容 */}
      <div className="platform-icon-group">
        {plat.map(item => {
          const platformId = item.platform.id
          const IconComponent = PLATFORM_ICON_COMPONENT_MAP[platformId]
          return IconComponent ? (
            <span key={platformId} className="icon-wrapper">
              <IconComponent size={18} color="#999" />
            </span>
          ) : null
        })}
      </div>
    </div>
  )
}

补充样式建议 #

给图标容器加简单样式即可实现并列展示的效果：

.platform-icon-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

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