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

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] 你应该在 generateLayout() 里面做 p[active_menu]

Demo

Answer 4

回答以下评论：

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生命周期方法， 或者您可以选择在每次更新状态值时更新本地存储。

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