小编Sar*_*yar的帖子

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

 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 …