React 中如何使用 Portal？

推荐答案

在 React 中，Portal 提供了一种将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点中的方式。通常用于处理模态框、工具提示、弹出菜单等需要脱离当前 DOM 结构的场景。

// www.javascriptcn.com code example
import React from 'react';
import ReactDOM from 'react-dom';

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

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

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

在这个例子中，Modal 组件的内容会被渲染到 id 为 modal-root 的 DOM 节点中，而不是 App 组件的 DOM 结构中。

本题详细解读

什么是 Portal？

Portal 是 React 提供的一种机制，允许你将子组件渲染到 DOM 树中的任意位置，而不受父组件 DOM 结构的限制。这在处理模态框、工具提示、弹出菜单等需要脱离当前 DOM 结构的场景时非常有用。

如何使用 Portal？

使用 ReactDOM.createPortal 方法可以将子组件渲染到指定的 DOM 节点中。createPortal 接受两个参数：

1. 子组件：需要渲染的 React 元素。
2. 目标 DOM 节点：子组件将被渲染到的 DOM 节点。

ReactDOM.createPortal(children, domNode);

使用场景

• 模态框：模态框通常需要覆盖整个页面，并且不希望受到父组件样式的影响。
• 工具提示：工具提示可能需要出现在页面的任意位置，而不受父组件布局的限制。
• 弹出菜单：弹出菜单可能需要脱离父组件的 DOM 结构，以避免被父组件的样式或布局影响。

注意事项

• 事件冒泡：尽管 Portal 将子组件渲染到了不同的 DOM 节点中，但事件仍然会按照 React 的组件树结构进行冒泡。这意味着在 Portal 中触发的事件仍然可以在父组件中捕获。
• 性能：使用 Portal 不会对性能产生显著影响，因为 React 仍然会维护组件树的一致性。

示例代码

// www.javascriptcn.com code example
import React from 'react';
import ReactDOM from 'react-dom';

function Tooltip({ children, targetId }) {
  const targetElement = document.getElementById(targetId);
  return ReactDOM.createPortal(
    <div className="tooltip">
      {children}
    </div>,
    targetElement
  );
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <div id="tooltip-target"></div>
      <Tooltip targetId="tooltip-target">
        <p>This is a tooltip!</p>
      </Tooltip>
    </div>
  );
}

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

在这个例子中，Tooltip 组件的内容会被渲染到 id 为 tooltip-target 的 DOM 节点中，而不是 App 组件的 DOM 结构中。