面试题：React中Portal技术在组件里的基本应用场景

Question

请阐述React Portal技术在组件中的至少两个基本应用场景，并简单说明如何实现将一个组件渲染到DOM树的其他位置。

Answer 1

React Portal技术的基本应用场景

1. 模态框和弹窗：在网页应用中，模态框和弹窗需要在DOM树的特定位置（通常是靠近文档根节点）渲染，以确保它们在视觉上能覆盖其他内容，并且不会受到父组件样式的过多影响。例如，一个应用的全局提示框，无论在哪个组件内部触发，都需要在顶层显示，不会被父组件的CSS布局所限制。
2. 全局通知：类似于模态框，全局通知也需要在一个统一的位置展示，不依赖于触发通知的组件在DOM树中的位置。这样可以保证通知展示的一致性和全局性。

将组件渲染到DOM树其他位置的实现方式

1. 使用ReactDOM.createPortal：
   • 首先，在HTML文件中准备一个目标DOM元素，例如在index.html中创建一个div元素：

   <div id="portal-root"></div>
   

   • 然后在React组件中，使用ReactDOM.createPortal来将组件渲染到这个目标元素。假设我们有一个简单的Modal组件：

   import React from'react';
   import ReactDOM from'react-dom';
   
   const Modal = ({ children }) => {
     const el = document.getElementById('portal-root');
     return ReactDOM.createPortal(
       <div>{children}</div>,
       el
     );
   };
   
   export default Modal;
   

   • 在使用Modal组件的地方，例如App组件中：

   import React from'react';
   import Modal from './Modal';
   
   const App = () => {
     return (
       <div>
         <Modal>
           <p>This is a modal content</p>
         </Modal>
       </div>
     );
   };
   
   export default App;
   

   这样，Modal组件的内容就会被渲染到id为portal - root的DOM元素中，而不是在App组件原本的DOM位置。