13

我正在使用react-grid-layout 它drag 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 两个对象一个用于第一家公司和其他公司。

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

更新代码沙箱请检查

4

4 回答 4

0

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

const layout = generateLayout(); 
console.log(layout);`
于 2021-05-20T03:16:49.890 回答
0

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;
    };
于 2021-05-29T02:34:37.340 回答
0

回答以下评论：

if I just comment local storage it works fine the layout shown UI is per requirement, But as you said to try with state it will not cover my requirement like when I refresh the page it will again go to initial positions. I am using LS to save layouts in that so that when user switches tab or refresh page they should se the same, But this Local storage is the one which is causing issue – 
vivek singh
May 20 at 3:54

作为更好的做法，当您使用本地存储时，从本地存储访问值并将其分配给安装组件时的状态，通过该状态使用它，最后在卸载组件时将值存储回本地存储/无论何时正在更新状态更新本地存储。

类内组件：挂载时更新使用componentdidMount生命周期方法，卸载时使用componentWillUnmount生命周期方法，或者您可以选择每次更新状态值时更新本地存储。

在 Function 组件中：要在挂载使用const[value, setValue]= useState(loca storage value)生命周期方法时更新，以及更多卸载使用，useEffect 挂钩的返回类型是回调，其服务类似于析构函数，因此您可以在该回调中将值存储回本地存储，或者您可以每次更新状态值时选择更新本地存储。

于 2021-11-12T19:53:08.837 回答
0

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

演示

于 2021-06-17T15:55:11.387 回答