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

Answer 2

generateLayout() 方法不返回任何内容，您需要返回 empId 以与活动菜单关联。

generateDom() 方法必须从非活动菜单/选项卡中排除布局，键应该是唯一的，所以我也使用了 empId。

检查这个沙箱 https://codesandbox.io/s/elastic-morning-9ufky?file=/src/App.js

const generateDOM = (lo) => {
      const layout = generateLayout();

      return _.map(layout, function (l) {
        const emp = lo.find((item) => {
          return l.i === item.empId;
        });
        if (emp) {
          return (
            <div key={emp.empId} className="bg-success">
              <div>{emp.empName}</div>
            </div>
          );
        } else return <Fragment key={Math.random()} />;
      });
    };

    const generateLayout = () => {
      const p = data1 || []; //props;
      const result = [];
      p.forEach((li) => {
        li.comp_data.forEach(function (item, i) {
          if (item.empName === "Dheeraj") {
            result.push({
              x: (i * 2) % 12,
              y: Math.floor(i / 6),
              w: 6,
              h: 4,
              i: item.empId
            });
          } else {
            result.push({
              x: (i * 2) % 12,
              y: Math.floor(i / 6),
              w: 4,
              h: 2,
              i: item.empId
            });
          }
        });
      });

      return result;
    };

Answer 3

看起来你的第一个代码和盒子例子是正确的，只是一个小错误，而不是做p[0]，你应该在p[active_menu]里面做generateLayout()

Demo

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

3 个答案: