React-Portal传送

Portal传送

1. 将组件传送到某个层级的节点，比如document.body
2. 常用于弹窗等组件的封装

import React from 'react';
import ReactDOM from "react-dom";
import './style.css'

class Portal extends React.Component{

    constructor(props) {
        super(props);
    }

    render() {
        return ReactDOM.createPortal(
            <div className='modal'>{this.props.children}</div>,
            document.body
        )
    }
}

class Basics08 extends React.Component{

    constructor(props) {
        super(props);
    }
    render() {
      return  <Portal><a onClick={this.testFn}>测试</a></Portal>
    }

    testFn = () =>{
        alert('测试')
    }
}



export default Basics08