React如何根据CMS返回的社媒字符串动态渲染已导入的SVG图标

• 你当前代码里img标签的src属性传入的是{ selectedSocial: "facebook" }格式的对象，并非你预先导入的SVG图标资源，自然无法正常渲染。
• 导入的facebook、twitter、pinterest图标变量和接口返回的平台字符串没有建立映射关系，无法直接通过字符串匹配到对应的图标资源。
• 额外冗余问题：外层已经判断过links是数组才会进入渲染逻辑，内层map前的Array.isArray(links)判断完全多余，可以删除，同时列表渲染缺少唯一key属性，会触发React警告。

先创建平台名称到图标资源的映射对象，再从映射对象中取值传给img的src属性即可，同时补充alt属性符合网页可访问性规范，也可以加兜底逻辑避免未知平台名称报错。

修复后的完整代码如下：

import React from "react";
import twitter from "../images/socials/twitter.svg";
import pinterest from "../images/socials/pinterest.svg";
import facebook from "../images/socials/facebook.svg";

// 建立平台字符串和导入图标的映射关系
const socialIconMap = {
  twitter,
  pinterest,
  facebook
}

const SocialDivider = ({ links, alignLeft }) => {
  return Array.isArray(links) ? (
    <div className="generic-block-container">
      <div
        className="socials-footer"
        style={{
          justifyContent: alignLeft ? "flex-start" : "",
        }}
      >
        {links.map((link) => {
          const selectedSocial = link.social_media;
          const iconSrc = socialIconMap[selectedSocial];
          // 可选：如果没有匹配到对应图标直接跳过渲染
          if (!iconSrc) return null;

          return (
            <a className="socials-footer__item" href={link.url} key={link.url}>
              <img src={iconSrc} alt={`${selectedSocial}官方账号`} />
            </a>
          );
        })}
      </div>
    </div>
  ) : (
    <></>
  );
};

export default SocialDivider;

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