我有这种 json 响应:
{id: 1, name: a}
{id: 2, name: b}
{id: 3, name: c}
{id: 4, name: d}
{id: 5, name: e}
{id: 6, name: f}
我想在我的 React 组件中将它们按 2 分组,如下所示:
<div className="group-item">
<div className="item">a</div>
<div className="item">b</div>
</div>
<div className="group-item">
<div className="item">c</div>
<div className="item">d</div>
</div>
等...
我试过了,但我不知道如何有条件地关闭标签:
return _.map(items, (item, i) => {
let groupStart, groupEnd;
i % 2 === 0 ? groupStart = <div className="group-item"> : groupEnd = </div>
return (
groupStart + item.name + groupEnd
);
});
您有一些实现该目标的技巧吗?
最佳答案
您可以简单地预处理您的数据并先将其分组然后呈现,而不是有条件地关闭标签
const data = [
{id: 1, name: 'a'},
{id: 2, name: 'b'},
{id: 3, name: 'c'},
{id: 4, name: 'd'},
{id: 5, name: 'e'},
{id: 6, name: 'f'}
];
const res = data.reduce((acc, item, index) => {
if(index % 2 == 0) {
acc.push([item])
} else {
acc[Math.floor(index/2)].push(item);
}
return acc;
}, [])
return _.map(res, (item, i) => {
return (
<div className="group-item" key={i}>
<div>{item[0].name}</div>
<div>{item[1].name}</div>
</div>
});
关于javascript - 条件关闭标签 ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54930714/