javascript - 在 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 元素，但它的类根据元素是奇数还是偶数而改变

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

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