React 进阶面试题, 什么是 React 的插槽Portals?请举例说明 React 插槽的应用场景

Step 1

Q:: 什么是 React 的插槽（Portals）？

A:: React 的插槽（Portals）是一种将子节点渲染到 DOM 树中父组件以外的 DOM 节点的方法。它通常用于将组件内容渲染到不同于其常规父组件的 DOM 位置，例如，模态框、工具提示或其他不影响组件树结构的浮动 UI 元素。使用 Portals 可以让你在不破坏组件树层次结构的情况下，实现将某些元素渲染到其他地方的需求。

Step 2

Q:: 如何使用 React 的插槽（Portals）？

A:: 要使用 Portals，你需要用到 ReactDOM.createPortal(child, container) 方法。这个方法接收两个参数：要渲染的子节点和目标 DOM 容器。例如：

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

在这个例子中，Modal 组件中的子元素被渲染到了 id 为 'modal-root' 的 DOM 节点中，而不是默认的父组件 DOM 树中。

Step 3

Q:: React Portals 的典型应用场景有哪些？

A:: 典型的应用场景包括： 1. 模态框：模态框通常需要覆盖在应用的其他内容之上，因此需要被渲染到一个独立的 DOM 节点中。 2. 工具提示（Tooltip）：工具提示通常需要在页面的最上层显示，不受父组件样式或位置的影响。 3. 通知系统：类似模态框，通知系统可能需要在应用的任意位置出现。 4. 悬浮菜单或下拉菜单：这些组件可能需要与其触发器组件分离，以确保正确的显示位置。