全面掌握 React—Portals

portal（门户）

Doorway that connects two distant locations seperated by spacetime
传送门

React 提供了直接访问 DOM 元素，直接将 React element 添加到 html 某个 DOM 元素上，这个 DOM 元素并不在 React 控制下，也就是将 React Element 传送给某个 DOM 然后渲染出来，好不难理解，那么要实现这件事就需要明确两件事，传什么，传到哪里 所以ReactDom.createPortal，接受两个参数，一个是要传的 React element 一个要传到的 DOM 节点

import React, { Component,Fragment } from 'react'

export default class index extends Component {
    render() {
        return (
            
                

                    
React Portal
                    
                
            
        )
    }
}

在 index.html 文件中定义一个 id 为 portal 的 div 用于接受要传入的 React element。

export default class index extends Component {
    state = {showModal:false};
    toggleModal = () => this.setState({showModal:!this.state.showModal})
    render() {
        return (
            
                

                    
React Portal
                    

                        

                            Zdiea tuts
                            Show Modal
                            {
                                this.state.showModal && ReactDom.createPortal(
                                    ,
                                    document.getElementById("portal")
                                )
                            }
                            
                        
                    
                
                
            
        )
    }
}

function Tut(){
    return(
        

            hello portal
        
    )
}

创建一个 state 用于控制 Portal 显示

 state = {showModal:false};

                    {
                              this.state.showModal && ReactDom.createPortal(
                                    ,
                                    document.getElementById("portal")
                                )
                            }

代码还有改进的空间，我们在 index.html 需要写一个 id 为 portal 的 div 本身这就失去灵活性。我们需要自动添加一个 div 作为 portal 的容器，然后在关闭时将其移出，避免产生多余 div。

export default class index extends Component {
    state = {showModal:false};
    toggleModal = () => this.setState({showModal:!this.state.showModal})
    render() {
        return (
            
                

                    
React Portal
                    

                        

                            Zdiea tuts
                            Show Modal
                            {
                                this.state.showModal && 
                            }
                            
                        
                    
                
                
            
        )
    }
}

class Tut extends Component{

    constructor(props){
        super(props);
        this.container = document.createElement('div');
        document.body.appendChild(this.container);
    }

    render(){
        return ReactDom.createPortal(

            
                
Motal
                Close
            ,
            this.container
        )
    }
}

可以事件扩展到外层 div 上，这样两个 button 都可以触发这个事件了。

在 constructor 构造函数中创建 div 容器用于放置 portal。

    constructor(props){
        super(props);
        this.container = document.createElement('div');
        document.body.appendChild(this.container);
    }

在 component 的 componentWillMount 生命周期将其移出。

    componentWillMount(){
        document.body.removeChild(this.container);
    }