将弹层作为传送门构建：React Portal

前端

2023-10-16 16:52:29

React Portal，一个可以在应用中创建弹层组件的强大工具。它允许我们在应用程序的任何地方渲染组件，而不管它的父组件的层次结构。这种灵活性使得 Portal 非常适合创建模态对话框、工具提示和悬浮菜单等组件。

简洁方案：省却 Modal 与绝对定位

在 React Native 中，我们通常使用 Modal 或绝对定位来创建弹层组件。然而，这些方法都存在一些缺点。Modal 组件会覆盖整个屏幕，这可能会遮挡其他重要的内容。绝对定位组件则需要我们手动计算位置，这可能会导致布局混乱。

而 React Portal 则提供了更加优雅的解决方案。它允许我们在应用程序的任何地方渲染组件，而无需担心组件的父组件的层次结构。这使得 Portal 非常适合创建模态对话框、工具提示和悬浮菜单等组件。

多元展现：Portal 的典型应用

除了上述提到的优点外，Portal 还具有以下优点：

灵活性： Portal 可以放置在应用程序的任何位置，即使是父组件的层次结构不允许的情况下。
组件隔离： Portal 可以隔离组件，使其不会影响父组件的布局和样式。
性能优化： Portal 可以提高性能，因为只有在需要时才会渲染组件。

使用 Portal 创建弹层组件

让我们通过一个简单的例子来了解如何使用 Portal 创建弹层组件。首先，我们需要创建一个新的 React 组件，例如 Dialog 组件。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Dialog = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openDialog = () => {
    setIsOpen(true);
  };

  const closeDialog = () => {
    setIsOpen(false);
  };

  return (
    <>
      <button onClick={openDialog}>Open Dialog</button>
      {isOpen && ReactDOM.createPortal(
        <div className="dialog">
          <p>This is a dialog.</p>
          <button onClick={closeDialog}>Close Dialog</button>
        </div>,
        document.body
      )}
    </>
  );
};

export default Dialog;

然后，我们在应用程序的主组件中使用 Dialog 组件。

import React from 'react';
import Dialog from './Dialog';

const App = () => {
  return (
    <div>
      <h1>Welcome to React Portal!</h1>
      <Dialog />
    </div>
  );
};

export default App;