【React】portal

createPortal 允许你将 JSX 作为 children 渲染至 DOM 的不同部分。

createPortal(children, domNode, key?)

使用 portal 渲染模态对话框

import NoPortalExample from "./components/NoPortalExample";
import PortalExample from "./components/PortalExample";


function App() {

    return (
        

            

                
            
            

                
            
        
    );
}

export default App;

import React from 'react';

function ModalContent({ onClose }) {

    return (
        

            
这是一个对话模态框
            关闭
        
    );
}

export default ModalContent;

import React, {useState} from 'react';
import ModalContent from "./ModalContent";

function NoPortalExample(props) {
    const [showModal, setShowModal] = useState(false)
    return (
        

             setShowModal(true)}>不使用 portal 展示模态
            {showModal && (
                 setShowModal(false)} />
            )}
        
    );
}

export default NoPortalExample;

import React, {useState} from 'react';
import ModalContent from "./ModalContent";
import {createPortal} from "react-dom";

function PortalExample(props) {
    const [showModal, setShowModal] = useState(false);
    return (
        

             setShowModal(true)}>使用 portal 展示模态
            {showModal && createPortal(
                 setShowModal(false)} />,
                document.body
            )}
        
    );
}

export default PortalExample;