在ReactJs中将className添加到奇数和偶数元素

Question

I am trying to add the className "direction-r" to the divs in the "timeline" list that are even and className "direction-l" to every other item (odd). I know how it can be achieved using JQuery but not sure how to get it done using ReactJs. I am quite new to ReactJS and using it for the first time on a large project. Below is my code:

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

}

Thanks

Answer 1

Instead of modifying the DOM, React allows you to define rendering logic inside the render method before the DOM is created:

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

This should work.

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

    }