React Portals

简介

        React Portal 可以将组件渲染到dom树的不同位置，同时可以渲染到任意父级元素，可以实现漂浮层功能。

使用样例

        本篇文章通过React Portals实现对话框，下面将会给出具体实现。

protal组件

Portal.jsx

import {useState} from "react";
import ReactDOM from "react-dom";
import "./Portal.css"
export const Portal = () => {
    const [visible, setVisible] = useState(false);
    if (!visible){

        return 
setVisible(true)}>打开对话框
    }
    return ReactDOM.createPortal((
        <>
            

                
这是一个对话框！
                

                setVisible(false)}>关闭对话框
            
        

    ), document.getElementById("dialog-container"))
}

Portal.css

.portal-sample {
    position: absolute;
    padding: 20px;
    width: 500px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 20px 2px #ddd;
}

App.js

function App() {
    return (
        
    );
}

export default App;

index.html

使用效果