在React JS

时间:2016-07-19 17:43:10

标签: javascript reactjs

比方说,我有一个我希望以交错方式呈现的元素列表:

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

1 个答案:

答案 0 :(得分:0)

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