如何在反应中处理条件渲染

Question

我正在使用react-grid-layout Thisdrag and drop and resizing在我的网站中启用。所以拖放我能够实现并将我的布局存储到本地存储也完成了。

我正在使用本地存储来保存我的布局，以便使用此示例获得更好的用户体验

事情是我想要做的是有条件地为盒子提供高度和宽度，比如如果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()
      };
    }
  });
};

上述方法不能按要求工作。

这是完整的工作代码

编辑更新

我改变了我的数据，因为我在循环 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 两个对象一个第一家公司和其他公司。

我认为这是在这里写解释的方式

更新的代码沙箱请检查

Answer 1

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

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