javascript - 如何在 react 中处理条件渲染

Question

我正在使用 react-grid-layout This启用 drag and drop and resizing在我的网站上。
所以拖放我能够实现并将我的布局存储到本地存储也完成了。
我正在使用本地存储来保存我的布局，以便使用 This example 获得更好的用户体验
事情是我想做的是有条件地给盒子高度和宽度，比如 empName==="steve"宽度应为 5，否则应为 3
所以我所做的是

const generateLayout = () => {
  const p = data1 || []; //props;
  return p[0].comp_data.map(function (item, i) {
    console.log(item);
    if (item.empName === "steve") {
      return {
        x: (i * 2) % 12,
        y: Math.floor(i / 6),
        w: 2,
        h: 4,
        i: i.toString()
      };
    } else {
      return {
        x: (i * 2) % 12,
        y: Math.floor(i / 6),
        w: 4,
        h: 2,
        i: i.toString()
      };
    }
  });
};

上述方法不能按要求工作。
Here is the full working code
编辑更新
我更改了我的数据，因为它是错误的，我正在循环 p[0]
现在我所做的是我为选项卡创建了一个数据，它将显示菜单，即

    let tabData = [
    {
        tab: 'info',
        id: 1,
    },
    {
        tab: 'info1',
        id: 2,
    },
];

我拥有的另一个是compData，它将具有emp状态
像下面

    let data1 = [
    {
        comp_data: [
            {
                empId: 1,
                empName: 'el1',
            },
            {
                empId: 2,
                empName: 'el2',
            },
        ],
    },
    {
        comp_data: [
            {
                empId: 11,
                empName: 'el11',
            },
            {
                empId: 12,
                empName: 'el22',
            },
        ],
    },
];

重要 - 实际上，在我的真实场景中，我一次获取所有选项卡，而不是单击一个选项卡获取该选项卡的 id 并从后端获取该 id 的 compData 但在这里我不能这样做，所以我首先放入 data1 两个对象公司和其他公司。
我认为这是在这里写解释的方式
updated code sandbox please check

Answer 1

generateLayout 中的 if 条件似乎正在工作，因为如果您添加如下日志，您将看到您的条件语句正在工作`

const layout = generateLayout(); 
console.log(layout);`