React怎么将一个元素插入到body或者其他节点上

在 React 中，要将一个元素插入到 body 节点上，你可以使用 ReactDOM.createPortal() 。createPortal() 函数用于将子元素渲染到父组件之外的 DOM 节点。以下是一个简单的例子，演示如何将一个元素插入到 body 节点上：

1. 首先确保已安装 react 和 react-dom：

bashCopy code
npm install react react-dom --save

2. 在你的组件中引入 React 和 ReactDOM：

javascriptCopy code
import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom';

3. 创建一个组件，并在其中使用 createPortal() ：

const CustomPortal = () => {   
    const [container, setContainer] = useState(null);   
    useEffect(() => {    
        // 创建一个新的 div 元素     
        const newContainer = document.createElement('div');     
        // 将新的 div 元素添加到 body 节点上     
        document.body.appendChild(newContainer);     
        // 设置状态     
        setContainer(newContainer);     
        // 组件卸载时，从 body 节点上移除 div 元素     
        return () => {       
            document.body.removeChild(newContainer);     
        };   
    }, []);   
    
    // 使用 createPortal() 将子元素插入到新的 div 元素中   
    return container     
        ? ReactDOM.createPortal(         
            <div style={{ position: 'fixed', top: '20px', left: '20px' }}>           
            这个元素被插入到 body 节点上。         
            </div>,         
            container       
        ) : null; 
}; 
    export default CustomPortal;

创建了一个名为 CustomPortal 的组件。当这个组件被挂载时，我们使用 useEffect 创建一个新的 div 元素，并将其添加到 body 节点上。然后，我们使用 ReactDOM.createPortal() 将子元素插入到新创建的 div 元素中。当组件卸载时，我们从 body 节点上移除新创建的 div 元素。