用React轻松掌握Portals，赋能应用构建

前端

2023-09-10 12:28:47

初识React Portals

1.1 什么是React Portals

React Portals是一种将组件渲染到DOM树中的不同位置的机制，使我们能够跳出组件树的常规层次结构，将组件插入到其他任意位置。这种灵活性对于创建模态框、弹出窗口、工具提示等需要脱离组件树的组件非常有用。

1.2 Portal的优势

使用Portals具有以下优势：

组件的放置更加灵活，不受组件树层次结构的限制。
增强了组件的复用性，可以将Portal组件作为独立的模块在不同位置使用。
简化了组件的组织结构，避免了组件树的臃肿和复杂性。

2. 实现React Portals

2.1 创建Portal容器

首先，我们需要创建一个作为Portals容器的组件，它将负责将组件渲染到DOM树中的目标位置。可以使用React.createPortal方法创建Portal容器，该方法接受两个参数：需要渲染的组件和目标DOM元素。

const MyPortal = () => {
  const target = document.getElementById("portal-target");
  return ReactDOM.createPortal(<MyComponent />, target);
};

2.2 渲染Portal组件

创建好Portal容器后，就可以在组件中使用它来渲染组件了。在组件的render方法中，使用Portal容器作为父组件，将需要渲染的组件作为子组件传递给它即可。

const MyComponent = () => {
  return (
    <div>
      <h1>我是脱离组件树的组件</h1>
    </div>
  );
};

3. 进阶技巧

3.1 嵌套Portals

React Portals支持嵌套使用，这意味着可以在一个Portal组件中再嵌套另一个Portal组件，从而实现更加复杂的组件布局。

const NestedPortal = () => {
  const target1 = document.getElementById("portal-target-1");
  const target2 = document.getElementById("portal-target-2");
  return (
    <>
      <ReactDOM.createPortal(<MyComponent1 />, target1)
      <ReactDOM.createPortal(<MyComponent2 />, target2)
    </>
  );
};

3.2 管理Portal状态

有时我们需要在Portal组件中管理状态，比如模态框的显示和隐藏。可以使用React的useState钩子来管理状态，并将状态传递给Portal组件的子组件。

const MyPortal = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <button onClick={toggleModal}>打开模态框</button>
      {isOpen && (
        <ReactDOM.createPortal(
          <MyModal />,
          document.getElementById("modal-target")
        )
      )}
    </>
  );
};