.map() 不是映射（使用 .map() 生成 <div>）

Question

我想做的...

代码...

const programmingSkillsDetails = [
  { skill: "JavaScript", ratingPercentage: 85 },
  { skill: "React JS", ratingPercentage: 85 },
  { skill: "React Native", ratingPercentage: 85 },
  ...
];


...



<div
  className="resume-screen-container programming-skills-container"
  key="programming-skills"
>
    {programmingSkillsDetails.map((skill, index) => {
        <div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>;
    })}
</div>

输出...

呈现父“屏幕容器”<div> ...但不映射子 <div> 的

识别 skill.skill 和 skill.ratingPercentage

Answer 1

这是因为你的地图函数return什么都没有。

Map函数接受一个回调函数作为参数，如果你想在DOM中显示一些东西，这个回调必须return一些东西。 这里有更多信息：https://linguinecode.com/post/how-to-use-map-react

改为这样做：

{programmingSkillsDetails.map((skill, index) => 
        <div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>
    )}

或者你也可以这样写：

{programmingSkillsDetails.map((skill, index) => {
   return <div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>}
         )}

或者像这样：

{programmingSkillsDetails.map((skill, index) => {
   return (<div className="skill-parent" key={index}>
          <div className="heading-bullet"></div>
          <span>{skill.skill}</span>
          <div className="skill-percentage">
              <div
                style={{ width: skill.ratingPercentage + "%" }}
                className="active-percentage-bar"
              ></div>
          </div>
       </div>)}
         )}