在React中有条件地渲染DOM元素

Question

我尝试使用if / else和相同的问题 JSX

return ( 
     <Layout>
           <>
            {data.map((service, index) => (
              { index % 2 === 0 ?
                 <div className="circle"></div>
                 :
                 <div className="square"></div>  
               } 
              ))
             }
        </>
      </Layout> 
  )

错误

Answer 1

请使用以下代码。

return ( 
     <Layout>
           <>
            {data.map((service, index) => {
              return index % 2 === 0 ?
                 <div className="circle"></div>
                 :
                 <div className="square"></div>  

              })
             }
        </>
      </Layout> 
  )

Answer 2

更清洁的选择：

  return ( 
     <Layout>
       {data.map((service, index) => (
         <div className={index % 2 === 0 ? 'circle' : 'square'}></div>
       ))}
      </Layout> 
  )

Answer 3

那呢：

const elementSet = data.map(( service, index) => ((index % 2)===0) ? (<div className="circle"></div>) : (<div className="square"></div>) );
return ( 
       <Layout><>
        {elementSet}
       </></Layout>
);