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)
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>