javascript - 可以乘以或连接 JSX 吗？

Question

我使用 React 和 Font Awesome 来创建一排星星。我有一个函数，它接受一个数字并产生那么多星星。我试图找到在 react 组件中执行此操作的最佳方法。基本上，我需要将 JSX 元素乘以一个数字，让它根据传入的内容动态重复:

reviewStars(num) {
    const star = <i className="fa fa-star" aria-hidden="true"></i>;
    const getStarCount = star.repeat(num);
    return getStarCount;
  };

如果 JSX 是一个字符串，这会起作用，但因为它不是，所以我不能对其调用 repeat(错误说 star 不是一个函数)。我可以将它用单引号括起来 '' 然后替换它们，但想知道是否有更好的处理方式？谢谢。

Answer 1

尝试这样的事情:

reviewStars(num) {
  let stars = [];
  for(let i= 0; i < num; i++) {
    stars.push(<i key={i} className="fa fa-star" aria-hidden="true"></i>);
  }
  return (
    <div>{stars}</div>
  );
};

编辑: 记得将键添加到列表中