React - 有条件地安装/卸载组件

Question

语境

假设我有一个显示员工列表的页面，以及许多其他按钮和组件。 每当我点击某个员工时，都会出现一个侧面板，其中包含有关该员工的大量信息。 如果我在选择员工时单击任何其他员工，侧面板保持不变，只有其中的信息被重新获取和更新。 我还可以通过编辑不同的字段并单击批量Update每个更新的字段的更新，从该侧面板更改员工的信息。

问题陈述

每当编辑一个员工的信息时，我也可以点击另一个员工，这当然意味着之前员工的编辑数据丢失了。

客观的

在这种情况下，我需要做的是，每当从侧面板编辑员工的信息时（存在一个标志来表示），并且如果单击Update之外的任何其他组件/按钮，那么我需要显示一种模式，它表明所有未保存的内容都将丢失。 如果用户选择Ok ，被点击的组件应该挂载/渲染/执行它所做的任何事情。 否则，用户应将 go 退回到之前的 state。

---

我最初尝试通过使用侧面板的componentWillUnmount来实现这一点，但它并没有真正起作用，因为该组件无论如何都会卸载。 我在想的是，除了检查是否正在编辑任何信息的“更新”之外，我现在需要在每个按钮/组件中放置一个onClick处理程序，如果是，它将呈现该组件，如果不是，它将呈现该模态，并且用户决定在该模态中做什么。 我也非常怀疑这一点，因为我在各处都检查了一件小事。

有与此用例相关的经验的人吗？ 任何见解将不胜感激。 :)

Answer 1

首先将isEdited state isEdited: false然后当您编辑帖子时将isEdited设置为 true。 当用户单击update时，将 isEdited 设置回 false。 当用户单击update以外的按钮时，如果isEdited为true则检查isEdited ，然后在 model 的按钮被单击时显示modal with message and button的模式，将isEdited设置为false 。

希望这会有所帮助

Answer 2

我有几种方法可以做到这一点。

1. 在 function 的开头为每个按钮 onClick 添加检查。 正如您已经提到的，这很乏味，特别是如果有很多按钮会影响 state。

2. 创建一个包装 onClick 函数的 function 以执行此检查。 类似于 1，但更容易重复：

const myOnClick = newEmployeeNumber => {
  myState.employeeToView = newEmployeeNumber;
}

const checkUserWantsToContinue = (onClickToRunWhenContinued) => {
  if (myAppState.isEdited) {
    promptUserToSaveFirst();
  } else {
    onClickToRunWhenContinued();
  }
}

return (
  <div onClick={checkUserWantsToContinue(myOnClick)} />
);

3. 您提到您正试图将其放入 componentWillUnmount function 中。 这意味着某些东西正在使组件卸载。 你可以在那里添加检查吗？ 因此，与其在组件卸载前与用户核对，不如在组件卸载前与用户核对。