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はこれがうまくいく、文字列だった場合、それはありませんので、Iその上で繰り返しを呼び出すことはできません（エラーはスターは関数ではありません）。私はそれを一重引用符で囲むことができますし、それらを置き換えることができますが、これにはより良い扱いがあるのでしょうか？ありがとう。

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

編集： はJSXの有効性を維持するためにリスト

Answer 2

にキーを追加することを忘れないでください、あなたは最初に親に兄弟要素をラップする必要があります要素、<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> 

マッパーは、第2引数（インデックス）から各子要素にキーを割り当てます。