オプションの数を超えてマッピングするときに、各行に2つのオプションを表示する方法js

Question

ここで1つのファイルから4つのオプションをレンダリングしようとしていますが、2つのオプションを1つの行に表示し、もう1つの行はオプションを反復している間にそれをどうやって調べることはできません。ここに私のコードです。

`

{ 
     data.options.map(option => (
      <div> 
      <input type='radio' name='option' value={option.text} /> 
      <div> 
       <span>{option.text}</span> 
      </div> 
      </div> 
     ) 
    ) 
} 

`

Answer 1

あなたはそれが浮く作るためにあなたdivラッパーにクラスを追加し、フロートごとに2つのオプションがクリア要素が含まれるようにそのdiv要素を囲むことを願っています。

this fiddleの動作例を確認できます。

Answer 2

これはアプローチの一つである可能性があります。

マップを関数にラップします。

this.fetchOptions =(options) => 
     options.map(option => (
      <div> 
      <input type='radio' name='option' value={option.text} /> 
      <div> 
       <span>{option.text}</span> 
      </div> 
      </div> 
     ) 
    ) 

次のようにデータを渡す方法を2回呼び出します。

render(){ 
    <div> 
     <div className="Row">{this.fetchOptions(data.options.slice(0,2))}</div> 
     <div className="Row">{this.fetchOptions(data.options.slice(2,4))}</div> 
    </div> 
} 

は今DOMは二つのdiv要素でラップされていること、適切なクラスを適用することができます。

は、それが役立ちます:)