Question

我正在尝试添加className＆＃34; direction-r＆＃34;在＆＃34;时间线＆＃34;列表是偶数和className＆＃34; direction-l＆＃34;到其他每个项目（奇数）。我知道如何使用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

React允许您在创建DOM之前在render方法中定义渲染逻辑，而不是修改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>
            );
        }

    }

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

2 个答案: