React中如何根据props传入数值重复展示指定图片？

当然可以实现，下面是具体的修正方案和实现思路：

问题分析 #

你原来的代码里，for循环只是创建了JSX元素但没有收集并返回，所以这些星星不会被渲染到页面上。React要求你把需要渲染的JSX元素放在return的结构里，或者通过表达式插入。

实现方法 #

最常用的方式是生成一个长度为props.rating的数组，再用map方法遍历数组渲染星星图片：

修正后的完整代码 #

// 确保已经引入星星图片，比如：
import star from './path/to/star.jpg';

function Card(props) {
  return (
    <div className="card">
      <div className="rating">
        <h3 className="rating__text">Rating:</h3>
        {/* 这里生成对应数量的星星 */}
        {Array.from({ length: props.rating }).map((_, index) => (
          <img 
            key={index} 
            className="star" 
            src={star} 
            alt="star" 
          />
        ))}
      </div>
      <div className="personna">
        <img className="personna__img" src={props.personnaImg} alt="personna" />
        <h3 className="personna__name">{props.personnaName}</h3>
      </div>
      <p>review text</p>
    </div>
  );
}

关键细节说明 #

• Array.from({ length: props.rating })：创建一个长度等于props.rating的空数组，用来提供循环的次数。
• map((_, index) => ...)：遍历数组时，我们不需要数组元素的值（用_占位），只需要index作为每个星星的key（React要求列表元素必须有唯一key）。
• key属性：必须添加，帮助React识别列表元素的变化，提升渲染性能。这里用index是因为星星都是相同的元素，没有唯一标识，若有其他唯一值优先用其他值。

其他可选实现方式 #

如果喜欢提前处理数组，也可以在组件内部先生成星星元素数组，再在return里插入：

function Card(props) {
  const stars = [];
  for (let i = 0; i < props.rating; i++) {
    stars.push(
      <img 
        key={i} 
        className="star" 
        src={star} 
        alt="star" 
      />
    );
  }

  return (
    <div className="card">
      <div className="rating">
        <h3 className="rating__text">Rating:</h3>
        {stars}
      </div>
      {/* 其他部分不变 */}
    </div>
  );
}

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