可以乘以或连接 JSX 吗？

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 是一个字符串，这会起作用，但因为它不是，所以我不能对其调用 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>
  );
};

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

Answer 2

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

之后你将不得不循环 num 次并为星星重复你的 JSX，将它累积在一个你将 return 在包装器中的变量中。

像这样的东西应该对你有用

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 吗？

Possible to multiply or concat JSX?

javascript

reactjs

react-jsx