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