React Portal 使用指南

React Portal 是一个将子节点渲染到 DOM 中不同位置的技术，它允许你将组件渲染到 DOM 树中任何位置，而不仅仅是当前组件的子树中。

基本用法

  1. 创建一个 Portal 组件
  2. 使用 ReactDOM.createPortal 方法将组件渲染到指定的 DOM 节点
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <MyPortal />
    </div>
  );
};

const MyPortal = () => {
  return ReactDOM.createPortal(
    <h2>This is a Portal!</h2>,
    document.getElementById('my-portal')
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

优势

  • 避免重叠: Portal 可以避免组件之间的重叠，使得布局更加灵活。
  • 提升性能: Portal 可以将组件渲染到不同的 DOM 树中，从而避免不必要的重渲染。

示例

以下是一个使用 Portal 的示例，将模态框渲染到页面底部：

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = () => {
  return (
    <div className="modal">
      <div className="modal-content">
        <span className="close">&times;</span>
        <p>This is a modal!</p>
      </div>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <MyPortal />
    </div>
  );
};

const MyPortal = () => {
  return ReactDOM.createPortal(
    <Modal />,
    document.getElementById('modal-portal')
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

更多关于 React 的内容，请访问我们的React 教程。

React Portals