reactjsテンプレートループの三項演算子とマークアップ

Question

私はreactjsを初めて使っています.Jsonにはいくつかの入れ子配列があり、jsonをループしながら条件付き静的マークアップを複製する必要があります。

//現在のコードが

    { 
         list.title 
         ? list.list.map(function (li, k) { 
          return (
          <div key={k} className='row grid__row--offset--15'> 
           <div className='small-9 medium-7 large-6 columns border--solid--right-blue'> 
           <p className='text--font-size-14 text--right'>{index + 1}.{j + 1}.{k + 1}</p> 
           </div> 
           <div className='small-51 medium-52 large-53 columns medium-offset-1'> 
           <p className='text--font-size-14 paragraph--justified'>{li}</p> 
           </div> 
          </div> 
         ) 
         }) 
         : null 
        } 

//私は、ループセグメントの上方と下方ギャップdiv要素を追加することができ、このようなものが必要。

<div className='row grid__row--offset--20' /> 

- しかし、これは構文エラー

    { 
         list.title 
         ? <div className='row grid__row--offset--20' /> 
         list.list.map(function (li, k) { 
          return (
          <div key={k} className='row grid__row--offset--15'> 
           <div className='small-9 medium-7 large-6 columns border--solid--right-blue'> 
           <p className='text--font-size-14 text--right'>{index + 1}.{j + 1}.{k + 1}</p> 
           </div> 
           <div className='small-51 medium-52 large-53 columns medium-offset-1'> 
           <p className='text--font-size-14 paragraph--justified'>{li}</p> 
           </div> 
          </div> 
         ) 
         }) 
         <div className='row grid__row--offset--20' /> 
         : null 
        } 

Answer 1

を作成するには、お返しにあなたが{}内のマップ機能を持っており、返す必要があるためあなたは構文エラーを取得

{list.title && <div className='row grid__row--offset--20' />} 
    { 
       list.title && 
       list.list.map(function (li, k) { 
        return (
        <div key={k} className='row grid__row--offset--15'> 
         <div className='small-9 medium-7 large-6 columns border--solid--right-blue'> 
         <p className='text--font-size-14 text--right'>{index + 1}.{j + 1}.{k + 1}</p> 
         </div> 
         <div className='small-51 medium-52 large-53 columns medium-offset-1'> 
         <p className='text--font-size-14 paragraph--justified'>{li}</p> 
         </div> 
        </div> 
       ) 
       }) 


      } 
{list.title && <div className='row grid__row--offset--20' /> } 

Answer 2

を試してみてください三項演算からの単一要素

{ 
        list.title 
        ? <div><div className='row grid__row--offset--20' /> 
        { list.list && list.list.map(function (li, k) { 
         return (
         <div key={k} className='row grid__row--offset--15'> 
          <div className='small-9 medium-7 large-6 columns border--solid--right-blue'> 
          <p className='text--font-size-14 text--right'>{index + 1}.{j + 1}.{k + 1}</p> 
          </div> 
          <div className='small-51 medium-52 large-53 columns medium-offset-1'> 
          <p className='text--font-size-14 paragraph--justified'>{li}</p> 
          </div> 
         </div> 
        ) 
        }) 
        <div className='row grid__row--offset--20' /></div> 
        } 
        : null 
}