在React JS中渲染令人咋舌的圖像

Question

比如說，我有一個我希望以交錯方式呈現的元素列表：

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

render（）后的所需輸出：

title 1 [img 1]
[img 2] title 2
title 3 [img 3]

我怎么能做到這一點？ 我想我要問的是，如何遍歷列表項，並根據索引返回不同的標記？

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

Answer 1

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

或者如果你有相同的UI元素，但它的樣式或邏輯會根據它是奇數還是偶數而改變

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

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

或者如果你有相同的UI元素，但它的類根據if元素是奇數還是偶數而改變

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

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