小编典典

可以复制或合并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不是函数)。我可以将其括在单引号’‘中,然后替换为单引号,但想知道是否对此有更好的处理吗?谢谢。


阅读 370

收藏
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