我正在使用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不是函数)。我可以将其括在单引号’‘中,然后替换为单引号,但想知道是否对此有更好的处理吗?谢谢。
尝试这样的事情:
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> ); };
编辑:记得将密钥添加到列表