反応成分の整数をリストするためのforループの使用方法？

Question

私はroundsという名前のステートとcurrent_roundというステートを持っています。 current_roundのデフォルト値は0です。私がこれらの値でしたいのは、整数のリストボタンです。 roundsの値はそれを行うためにそう1、2、3および4

for (var i =(this.props.order.order.current_round + 1); i<(this.props.order.rounds+1); i++) { 

    return (
    <li><button id ={i} class="rounds_btn">{i}</button></li> 
    ); 
    } 

のボタンをリスト、4である場合、例えば、私は、上記のようなループのために作られ、それだけで、整数1の一つのボタンを示しています。

私のコードで何が問題になっていますか？エラーは表示されません。私はそれだけでレンダリング機能の最初の値を返します推測事前

Answer 1

で

感謝。結果を変数に入れ、この変数をレンダリングする必要があります。

Answer 2

ループ内に戻ると、関数（ループを含む）全体が実行を終了します。

この問題を解決する方法は、の配列の配列を作成し、ループの後に配列全体を返すことです。

let { rounds, current_round } = this.props.order; 
let list = []; 

for (let i = current_round + 1; i < rounds + 1; i++) { 
    list.push(
    <li> 
     <button id={i} key={i} className="rounds_btn">{i}</button> 
    </li> 
); 
} 

return list; 

しかし、リアクトでこれを行うための通常の方法はmap functionを使用することです。多くの場合

let { order } = this.props; 
let nums = range(order.current_round + 1, order.rounds + 1); 

return nums.map(i => (
    <li><button key={i} id={i} className='rounds_btn'></button></li> 
)); 

// quick range utility (could use lodash...) 
function range(start, end) { 
    let nums = []; 
    for (let i = start; i < end; i++) nums.push(i); 
    return nums; 
} 

あなたはすでにあなたの配列（人のリスト、アイテムのリストなど）を持っているだろうし、あなたがする必要があるのは、そのリストを返し、その後、リアクトコンポーネントにそれぞれ1をマップです。

また、Reactがコンポーネントのリストを忘れてしまった場合に警告する、keyという属性を追加しました（別の順序でリストを再レンダリングするとリストの調整に役立ちます）。 classのJavaScriptの予約語であるため、

また、むしろclassNameよりclassを使用するために気をつけ、代わりにJSXの小道具としてclassNameを使用することを選択し反応します。