Javascript 在React JS中渲染交错的图像

比如说，我有一个元素列表，我想以交错的方式呈现：

let items = [
{title: 'title 1', source: 'img/src/1'},
{title: 'title 2', source: 'img/src/2'},
{title: 'title 3', source: 'img/src/3'}
]

渲染（）后所需的输出：

我怎样才能做到这一点？我想我要问的是，如何遍历列表项，并根据它们的索引返回不同的标记

items.map(function(item, i) {
   return //Need help here
})

---

查看

i

索引以确定何时为奇数，何时为偶数。根据渲染不同的UI

React

元素

items.map(function(item, i) {
   if (i % 2) {
      // i is odd number
      // render one type of UI element
   } else {
     // i is even number
     // render another UI element
   }
});

因此，在

React

父组件中，您可以编写如下内容：

class ListOfItems extends Component {
  render() {
    const { items } = this.props;

    return {
      <div>
        {items.map((item, index) =>
          index % 2 ?
          <UIElement1 />
          :
          <UIElement2 />
        )}
      </div>
    );
  }
}

类ListOfItems扩展组件{
render（）{
const{items}=this.props；
返回{
{items.map（（项，索引）=>
索引%2？
:
)}
);
}
}

或者，如果您有相同的UI元素，但其样式或逻辑会根据它是奇数还是偶数而改变

class ListOfItems extends Component {
  render() {
    const { items } = this.props;

    return {
      <div>
        {items.map((item, index) =>
          <UIElement
            isOdd={!!(index % 2)}
          />
        )}
      </div>
    );
  }
}

class ListOfItems extends Component {
  render() {
    const { items } = this.props;

    return {
      <div>
        {items.map((item, index) =>
          <UIElement
            className={index % 2 ? className1 : className2}
          />
        )}
      </div>
    );
  }
}

类ListOfItems扩展组件{
render（）{
const{items}=this.props；
返回{
{items.map（（项，索引）=>
)}
);
}
}

或者，如果您有相同的UI元素，但其类根据元素是否为奇数或偶数而改变

class ListOfItems extends Component {
  render() {
    const { items } = this.props;

    return {
      <div>
        {items.map((item, index) =>
          <UIElement
            isOdd={!!(index % 2)}
          />
        )}
      </div>
    );
  }
}

class ListOfItems extends Component {
  render() {
    const { items } = this.props;

    return {
      <div>
        {items.map((item, index) =>
          <UIElement
            className={index % 2 ? className1 : className2}
          />
        )}
      </div>
    );
  }
}

类ListOfItems扩展组件{
render（）{
const{items}=this.props；
返回{
{items.map（（项，索引）=>
)}
);
}
}

如何通过CSS实现惊人的效果？

tr:nth child（偶数）{float:left}tr:nth child（奇数）{float:right}

我喜欢这个想法。可能代码更少。这肯定是我想要的。选择使用if-then-else语法，因为它更具反应性