说说你对 createPortal 的了解

ReactDOM.createPortal 是 React 的一个 API，用于将子节点渲染到 DOM 的不同部分，而不是当前组件的父级节点中。这对于需要在 DOM 的不同层级中插入内容（如模态框、工具提示、下拉菜单等）非常有用，因为它允许我们将子元素渲染到指定的 DOM 节点中，保持其逻辑上的位置和结构。

`createPortal` 的用法

ReactDOM.createPortal(child, container);

child：要渲染的子元素或 React 元素。
container：要将 child 渲染到的 DOM 节点。

特点和使用场景

DOM 层级结构：
- 通过 createPortal，你可以将子元素插入到 DOM 的任意位置，这对于需要在页面不同层级中展示内容的情况很有帮助。例如，模态框通常需要渲染在页面的顶层。
维持 React 组件的生命周期和状态：
- 使用 createPortal 渲染的元素仍然保持在 React 组件树中，因此它们会遵循 React 的生命周期方法，状态和上下文不会受到影响。
避免 CSS 影响：
- 在某些情况下，使用 createPortal 可以避免子组件的 CSS 被父组件的样式干扰，因为渲染到的 DOM 节点通常是在 body 或其他顶层容器中。

示例

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

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      <div className="modal">
        <h1>I'm a modal!</h1>
        <button onClick={this.props.onClose}>Close</button>
      </div>,
      document.body, // Modal 将被渲染到 body 元素中
    );
  }
}

export default Modal;

原理

createPortal 创建的组件会挂载到指定的 DOM 节点 container 中，但它仍然在 React 的组件树中。这意味着 React 可以处理它的生命周期和更新，而不是直接操作 DOM。

说说你对 createPortal 的了解

createPortal 的用法

特点和使用场景

示例

原理

`createPortal` 的用法