React/anu实现弹出层2

内容简介：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)
}

以上所述就是小编给大家介绍的《React/anu实现弹出层2》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• php如何实现session,自己实现session,laravel如何实现session
• AOP如何实现及实现原理
• webpack 实现 HMR 及其实现原理
• Docker实现原理之 - OverlayFS实现原理
• 为什么实现 .NET 的 ICollection 集合时需要实现 SyncRoot 属性？如何正确实现这个属性？
• 自己实现集合框架(十):顺序栈的实现

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。