使用React.createPortal的目标DOM元素

使用React.createPortal的目标DOM元素

基础概念

React.createPortal 是 React 提供的一个 API，用于将子节点渲染到存在于父组件以外的 DOM 节点中。这个方法创建了一个新的 DOM 节点，并将指定的子组件挂载到这个新节点上，而不是在当前组件的 DOM 结构中。

目标DOM元素

在使用 React.createPortal 时，需要指定一个目标 DOM 元素，这个元素是实际要挂载子组件的地方。通常，这个目标 DOM 元素是在 HTML 文件中的某个位置，通过 JavaScript 获取到的。

优势

1. 脱离文档流：可以将组件的一部分渲染到 DOM 树的其他位置，有助于解决样式冲突问题。
2. 性能优化：对于模态框、提示框等需要脱离当前组件层级的元素，使用 Portal 可以避免不必要的重渲染。
3. 更好的封装性：可以将复杂的 UI 结构分离出来，使得组件更加模块化和易于维护。

类型

• 模态框（Modal）：常见的应用场景是将模态框内容渲染到 body 下，避免被其他元素遮挡。
• 提示框（Tooltip）：将提示信息渲染到触发元素的旁边或者上方。
• 全局通知（Notification）：将通知栏渲染到页面的顶部或底部。

应用场景

• 当需要将组件的内容渲染到 DOM 树的其他部分时。
• 需要避免样式继承或 z-index 冲突的场景。
• 对于需要独立于当前组件层级显示的内容。

示例代码

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

function Modal({ children }) {
  const modalRoot = document.getElementById('modal-root');
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
      </div>
    </div>,
    modalRoot
  );
}

// 在 HTML 文件中需要有一个 id 为 modal-root 的元素
// <div id="modal-root"></div>

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Modal>
        <p>This is a modal dialog.</p>
      </Modal>
    </div>
  );
}

export default App;

遇到的问题及解决方法

问题：如果在使用 React.createPortal 时，目标 DOM 元素不存在，会报错。 原因：ReactDOM.createPortal 需要一个有效的 DOM 元素作为挂载点，如果该元素不存在，就会导致错误。 解决方法：

1. 确保在调用 React.createPortal 之前，目标 DOM 元素已经被正确地添加到页面中。
2. 可以使用条件渲染来确保在目标 DOM 元素存在时才进行渲染。

const modalRoot = document.getElementById('modal-root');
if (!modalRoot) {
  console.error('Target DOM element for portal not found!');
  return null;
}
return ReactDOM.createPortal(children, modalRoot);

通过这种方式，可以有效地避免因目标 DOM 元素不存在而导致的错误。