可以复制或合并JSX吗？

小编典典

可以复制或合并JSX吗？

reactjs

我正在使用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是字符串，则可以使用，但是因为不是，所以无法对其重复调用（错误表示star不是函数）。我可以将其括在单引号’‘中，然后替换为单引号，但想知道是否对此有更好的处理吗？谢谢。

阅读 372

2020-07-22

共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>
  );
};

编辑：记得将密钥添加到列表

2020-07-22