React中遍历导入的SVG组件不显示如何解决

你遍历数组渲染失败的核心原因有两个：

• 你把导入的SVG组件存在数组里之后，直接用{skill}的形式把组件引用插在了JSX里，React无法识别这种写法，必须以大写开头的JSX标签形式调用组件才能正常渲染。
• 你额外套了一层div放样式，没有把类名传给SVG组件本身，就算组件能渲染，样式也不会生效。另外你代码里混用了class和className，React中DOM元素的类名只能用className，写class不会被识别。

导入SVG的部分不需要改动，只需要调整组件渲染逻辑即可：

import React from "react";
import { ReactComponent as JavaScript } from "../../assets/javascript.svg";
import { ReactComponent as ReactLogo } from "../../assets/react.svg";
import { ReactComponent as Html } from "../../assets/html-5.svg";
import { ReactComponent as Css } from "../../assets/css-3.svg";
import { ReactComponent as Sass } from "../../assets/sass.svg";
import { ReactComponent as Bootstrap } from "../../assets/bootstrap.svg";
import { ReactComponent as Tailwind } from "../../assets/tailwindcss-icon.svg";
import { ReactComponent as MaterialUi } from "../../assets/material-ui.svg";
import { ReactComponent as Node } from "../../assets/nodejs.svg";
import { ReactComponent as Express } from "../../assets/express.svg";
import { ReactComponent as Firebase } from "../../assets/firebase.svg";
import { ReactComponent as PostgreSql } from "../../assets/postgresql.svg";
import { ReactComponent as MySql } from "../../assets/mysql.svg";

const Skill = () => {
  const skillsArray = [JavaScript, ReactLogo, Html, Css, Sass, Bootstrap, Tailwind, MaterialUi, Node, Express, Firebase, PostgreSql, MySql];
  return (
    <div
      name="skill"
      className="max-w-7xl pb-[15rem] mx-auto flex flex-col my-20"
    >
      <h2 className="text-xl text-[#a6a6a6] text-center z-10">
        &lt;!- - - - - Skills - - - - -&gt;
      </h2>
      <div className="mt-16 flex flex-col md:flex-row justify-center">
        <div className="hard-skill flex flex-col mx-20">
          <h1 className="text-2xl neon-green text-center z-10">Hard Skills</h1>
          <div className="skill flex flex-wrap justify-center w-60 z-10">
            {skillsArray.map((SkillIcon, index) => (
              <SkillIcon 
                key={index}
                className="w-[60px] h-[60px] m-2 p-3 bg-[#36393e] rounded-2xl shadow-xl shadow-gray-900" 
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Skill;

• 遍历的时候把每个组件项重命名为大写开头的SkillIcon，符合JSX组件的命名规则，以<SkillIcon />标签形式调用即可正常渲染。
• 直接把原来写在单个SVG标签上的样式类传给SkillIcon，不需要额外嵌套div，渲染效果和你逐一声明标签完全一致。
• 给每个遍历项加了key属性，避免React抛出列表渲染警告，因为是固定不变的静态图标列表，用数组索引作为key完全满足需求。
• 统一把所有标签上的class属性改成了React要求的className，避免样式不生效的问题。

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