將classNames添加到ReactJs中的奇數和偶數元素

Question

我試圖在「時間軸」列表中將evenName和className「direction-l」添加到每個其他項目（奇數）的div中的className「direction-r」 。我知道如何使用JQuery實現，但不知道如何使用ReactJs完成它。我對ReactJS很陌生，並且第一次在一個大型項目中使用它。下面是我的代碼：

class MainTimeline extends React.Component { 

    render() { 

    return (
     <div className="timeline-container"> 
     <h3>Timeline</h3> 
     <ul className="timeline"> 
      <li> 
      <div className="direction-r"> 
       <div className="title-wrapper"> 
       <span className="title professional"> 
        Declared bankrupcy 
       </span> 
       <span className="time-wrapper"><span class="time">2015 - present</span></span> 
       </div> 
       <div className="detail"> 
       <p className="place">Corporation</p> 
       </div> 
      </div> 
      </li> 
      <li> 
      <div className="direction-l"> 
       <div className="title-wrapper"> 
       <span className="title academic"> 
        Declared bankrupcy 
       </span> 
       <span className="time-wrapper"><span class="time">2015 - present</span></span> 
       </div> 
       <div className="detail"> 
       <p className="place">Corporation</p> 
       </div> 
      </div> 
      </li> 
     </ul> 
     </div> 
    ); 
    } 

} 

感謝

Answer 1

不是修改DOM的，作出反應，您可以創建DOM之前定義渲染渲染方法內部邏輯：

var listItems 
for(var i=0; i<4; i++) { 
    listItems.push(
     <li key={i}> 
     <div className={'direction-'+(i%2 ? 'r':'l')}> 
      <div className="title-wrapper"> 
      <span className="title professional"> 
       Declared bankrupcy 
      </span> 
      <span className="time-wrapper"><span class="time">2015 - present</span></span> 
      </div> 
      <div className="detail"> 
      <p className="place">Corporation</p> 
      </div> 
     </div> 
     </li> 
) 
} 

return (
    <div className="timeline-container"> 
    <h3>Timeline</h3> 
    <ul className="timeline"> 
     {listItems} 
    </ul> 
    </div> 
) 

Answer 2

這應該工作。

class MainTimeline extends React.Component { 

     render() { 
      var isEven = (your even odd logic); 
      var directionClass = isEven ? 'direction-r' : 'direction-l'; 
      return (
       <div className="timeline-container"> 
        <h3>Timeline</h3> 
        <ul className="timeline"> 
         <li> 
          <div className={directionClass}> 
           <div className="title-wrapper"> 
            <span className="title professional"> 
             Declared bankrupcy 
            </span> 
            <span className="time-wrapper"><span class="time">2015 - present</span></span> 
           </div> 
           <div className="detail"> 
            <p className="place">Corporation</p> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
      ); 
     } 

    }