比方说,我有一个我希望以交错方式呈现的元素列表:
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
})
答案 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>
);
}
}