如何向数组内的reactjs组件添加className？

Question

我有一个数组，其中包含包含图标组件和标题的对象，如下所示：

 const skills = [
    { icon: <FaHtml5 className="skill-icon" />, title: "HTML5" },
    { icon: <FaCss3 className="skill-icon" />, title: "CSS3" },
    { icon: <SiJavascript className="skill-icon" />, title: "JavaScript" },
    { icon: <FaReact className="skill-icon" />, title: "ReactJS" },
    { icon: <SiBootstrap className="skill-icon" />, title: "Bootstrap" },

  ];

我必须为每个组件写入 className="skill-icon" ...我尝试了这种添加 className 的方法，但这不起作用：

skills.map((add_class) => {
    add_class.icon.add.classList("myClass");
    console.log(add_class);
  });

我们是否应该像我一样在该数组中编写 className='skill-icon' 还是有其他方法来迭代所有组件并添加 className ？

我的 HTML 看起来像这样：

      <section className="skill-card-section">
        {skills.map((skill) => {
          //iterating over all the skills from that skills array
          return (
            <section className="skill-card" key={skill.title}>
              {skill.icon}
              <p className="skill-title">{skill.title}</p>
            </section>
          );
        })}
      </section>

Answer 1

您可以分配组件本身，而不是在技能数组中创建 a React.Node（通过调用<Component/>which 是 的合成糖）。React.createElement

const skills = [
  { iconComponent: FaHtml5, title: "HTML5" },
  { iconComponent: FaCss3, title: "CSS3" },
  { iconComponent: SiJavascript, title: "JavaScript" },
  { iconComponent: FaReact, title: "ReactJS" },
  { iconComponent: SiBootstrap, title: "Bootstrap" },
];

<section className="skill-card-section">
  {skills.map((skill) => {
    const Component = skill.iconComponent;
    return (
      <section className="skill-card" key={skill.title}>
        <Component className="skill-icon" />
        <p className="skill-title">{skill.title}</p>
      </section>
    );
  })}
</section>;