Question

我正在使用React和Font Awesome来创建一排星星。我有一个功能，需要一个数字，并产生许多明星。我正试图找到在反应组件中执行此操作的最佳方法。基本上，我需要将JSX元素乘以一个数字，以便根据传入的内容动态重复：

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

如果JSX是一个字符串，这可以工作，但因为它不是，我不能调用它上面的重复（错误说明星不是一个函数）。我可以用单引号''包装它然后替换它们，但想知道是否有更好的处理方法呢？谢谢。

Answer 1

尝试这样的事情：

<?php echo "hello world" ?> Hello world

编辑：记得在列表中添加密钥

Answer 2

为了保持JSX的有效性，首先需要将兄弟元素包装在父元素中，<span>或<div>。

之后你必须循环num次并为星星重复你的JSX，将它累积在你将在该包装内返回的变量中。

像这样的东西应该为你做的伎俩

reviewStars(num) {
   let stars = [];

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

   return (
       <span>
          {stars}
       </span>
   );
};

Answer 3

Array.from（）方法创建一个具有指定长度的数组。请在此处查看MDN。

<div>
{ Array.from({ length: num }, (_, i) =>
    <i key={i} className="fa fa-star" aria-hidden="true"></i>) }
</div>

映射器将第二个参数（索引）中的键分配给每个子元素。

可以乘法或连接JSX？

3 个答案: