Question

我已经构建了多个模态作为React功能组件。它们是通过模态的关联上下文中的isModalOpen布尔属性显示/隐藏的。效果很好。

现在，由于各种原因，一位同事需要我重构此代码，而是将模式的可见性控制在更高的级别。这是一些示例代码：

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import { UsersProvider } from '../../../contexts/UsersContext';
import AddUsers from './AddUsers';

const AddUsersLauncher = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <UsersProvider>
        <Button onClick={() => setShowModal(true)}>Add Users</Button>
        {showModal && <AddUsers />}
      </UsersProvider>
    </div>
  );
};

export default AddUsersLauncher;

一开始这一切都很好。呈现一个按钮，当按下该按钮时，将显示模式。

问题在于如何隐藏它。在我只是将化简器中的isModalOpen设置为false之前。

今天早些时候我与同事进行了快速交谈时，他说上面的代码可以工作，并且我不必将任何内容传递给AddUsers。我在想，尽管我需要将setShowModal函数传递到组件中，然后才能调用它来隐藏模式。

但是我很可能没有看到更简单的方法来执行此操作。可能有吗？

Answer 1

要在卸载时调用某些内容，可以使用useEffect。无论您在useEffect中返回的结果如何，都将在卸载时调用它。例如，在您的情况下

const AddUsersLauncher = () => {
  const [showModal, setShowModal] = useState(false);


  useEffect(() => {
    return () => {
      // Your code you want to run on unmount.
    };
  }, []); 


  return (
    <div>
      <UsersProvider>
        <Button onClick={() => setShowModal(true)}>Add Users</Button>
        {showModal && <AddUsers />}
      </UsersProvider>
    </div>
  );
};

useEffect的第二个参数接受一个数组，该数组区分元素的值以检查是否再次调用useEffect。在这里，我传递了空数组[]，因此，它将仅调用一次useEffect。

如果您传递了其他内容，可以说showModal在数组中，那么只要showModal的值发生变化，useEffect就会调用，并在指定时调用返回的函数。

Answer 2

如果您想将showModal保留为AddUsersLauncher中的状态变量，并从AddUsers内进行更改，那么是的，您必须将setShowModal的引用传递给{ {1}}。 React中的状态管理会在双向数据流中变得混乱，因此我建议您看看Redux来存储和更改多个组件共享的状态

如何卸载React功能组件？

2 个答案: