React/anu实现弹出层2

这次是使用了一个比较罕见的APIReactDOM.unstable_renderSubtreeIntoContainer，ReactDOM.unstable_renderSubtreeIntoContainer与ReactDOM.render 的区别是，一个能传parentContext，一个不能。

function  RealModal (props){
   return <div className='modal'>{props.children}</div>
}
  class Modal extends React.Component {
    appendMaskIntoDoc() {
        console.log(this)
        ReactDOM.unstable_renderSubtreeIntoContainer(
            this,
            <RealModal {...this.props}>
                {this.props.children}
            </RealModal>,
            this.container
        )
    }

    componentDidMount() {
      var div = this.container = document.createElement('div')
        div.innerHTML = '<p>1111</p><p>222</p>'
        div.className = 'placeholder'
        document.body.appendChild(div)
      
        this.appendMaskIntoDoc()
    }

    componentDidUpdate() {
        console.log('更新')
        this.appendMaskIntoDoc()
    }

    componentWillUnmount() {
        console.log('componentWillUnmount')
        document.body.removeChild(this.container)
    }

    render() {
        return null
    }
}
window.onload = function(){
    ReactDOM.render(<Modal title="aaa">99999</Modal>, document.getElementById('select'))

    setTimeout(function(){
       ReactDOM.render(<Modal title="aaa">新内容</Modal>, document.getElementById('select'))
    },500)
}