react——Portals：将子节点渲染到存在于父组件以外的 DOM 节点

Posted 2022-09-23 勇敢*牛牛

实现一个弹层

弹层挂载在一个新的节点
必须使用：createPortal方法返回创建组件
必须使用：document.getElementById(‘dialog’)找到挂载点

import  createPortal  from 'react-dom'
class Popups extends Component 
    render() 
        return createPortal(
            <div>
                我是弹层
            </div>,
            document.getElementById('dialog')
        );
   
    

这样写的前提是需要在挂载页面提前写好dom对象。

---

import React,  Component  from 'react';
import  createPortal  from 'react-dom';

const createDialog = () => 
    const el = document.createElement('div');
    el.id = 'dialog';
    document.body.appendChild(el);
    el.style.cssText = `  
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;`
    return [el,() => el.remove()]

class Popups extends Component 
    el = createDialog();
    componentDidMount() 
        this.timer = setTimeout(this.el[1], 3000)
    ;
    componentWillUnmount() 
        this.el[1]()
        this.timer && clearTimeout(this.timer)
    
    render() 
        return createPortal(
            <div>
                我是弹层
            </div>,
           this.el[0]
        );
        
    


export default Popups;

app.js

import React,  Component  from 'react';
import Popups from './commponents/Popups';
class App extends Component 
    state = 
        isShow:false
    
    onClickHanler = ()=>
        // this.setState(isShow:!this.state.isShow)
        this.setState(state=>(isShow:!state.isShow))
    
    render() 
        return (
            <div>
                this.state.isShow ? <Popups/>:""
                <button onClick=this.onClickHanler>弹层切换</button>
            </div>
        );
    


export default App;