时间戳

首页 > 解决方案 > 条件关闭标签 ReactJS

javascript - 条件关闭标签 ReactJS

问题描述

我有这种 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>

ETC...

我试过了，但我不知道如何有条件地关闭标签：

return _.map(items, (item, i) => {
   let groupStart, groupEnd;
   i % 2 === 0 ? groupStart = <div className="group-item"> : groupEnd = </div>
    return (
        groupStart + item.name + groupEnd
    );
});

你有一些技巧来实现这一目标吗？

标签： javascriptreactjs

解决方案

您可以简单地预处理数据并先对其进行分组，然后再渲染，而不是有条件地关闭标签

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

推荐阅读