这写Modal的时候遇到一个诡异的rea【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netct问题，即input无法输入。不能说资本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】深，但是对于自认为熟谙套路的react开【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】发者，检查了好几遍，调试了好一会儿，还是【本文首发于唐霜的博客】【本文首发于唐霜的博客】解决不了。

就在我快要放弃的时候，我突然想到，是不是【未经授权禁止转载】【原创不易，请尊重版权】所在组件树的上层组件在处理childre【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。n的时候对input做了处理？按理不该啊本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。。

于是我对嵌套的上一层组件内部实现进行了检【转载请注明来源】转载请注明出处：www.tangshuang.net查，最后发现，果然是在Modal的实现中本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。，使用了ReactDOM.render来转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】更新渲染，从而实现延时的动画效果。果然是本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。一大堆坑。

在实现Modal时，为了实现过渡动画，要【原创内容，转载请注明出处】未经授权，禁止复制转载。采用一个特殊的办法，当DOM挂载好之后，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】不能立即显示，而是要通过一个时间来过渡。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】由于element.style的操作会合【未经授权禁止转载】本文作者：唐霜，转载请注明出处。并，一次性更新，所以当DOM卸载时，直接本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】就将Modal干掉了。因此，Modal组【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net件内部通过state维护了两个状态dis【本文受版权保护】【本文受版权保护】play和visible。display【本文首发于唐霜的博客】原创内容，盗版必究。用于控制DOM的挂载卸载，visible转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。用于控制显示隐藏。特别是在关闭Modal本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。过程中，要先visible=false，【版权所有，侵权必究】原创内容，盗版必究。等过渡时间结束之后才能display=f【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。alse。

遇到这种情况，通过ReactDOM.re原创内容，盗版必究。【版权所有，侵权必究】nder来更新DOM的操作就会导致inp【原创内容，转载请注明出处】未经授权，禁止复制转载。ut无法输入。因为render函数在做d【转载请注明来源】【转载请注明来源】iff的时候，render是全量diff转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net，在input没有key的情况下，Rea【本文受版权保护】本文作者：唐霜，转载请注明出处。ctDOM无法确认是否其value要使用著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】对应值。甚至在其所在树的上层，就已经把它【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。干掉了。

通过createPortal可以解决这个本文作者：唐霜，转载请注明出处。【本文受版权保护】问题。

ReactDOM.createPorta【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netl用以创建一个React虚拟树，该虚拟树本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。被挂载在原虚拟树中，但是，在渲染到DOM【转载请注明来源】本文版权归作者所有，未经授权不得转载。中时，却被挂载在createPortal【原创不易，请尊重版权】未经授权，禁止复制转载。的第二个参数上。

这就出现了一种不常见的现象：virtua原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。l dom和真实的DOM并非以相同的结构著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。存在。让我们来用代码演示一下。

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.el = document.createElement('div')
  }
  componentDidMount() {
    document.body.appendChild(this.el)
  }
  componentWillUnmount() {
    document.body.removeChild(this.el)
  }
  render() {
    return (
      <div className="root">
        {ReactDOM.createPortal(<div className="child">child</div>, this.el)}
        <div>xxx</div>
      </div>
    )
  }
}

上面这段代码，虽然在虚拟树中，.chil【作者：唐霜】原创内容，盗版必究。d是.root的第一个子节点，但是在真正本文作者：唐霜，转载请注明出处。【转载请注明来源】的DOM中，.child被挂载在body【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】下的一个空div中，这个空的div就是我著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。们在constructor中创建的那一个【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。。

而通过createPortal创建的虚拟【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】树本身是属于react的元素树的一个节点本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net，因此，在实际更新的时候，完全遵循rea【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】ct的虚拟树逻辑，也就避免了文章开头提到【版权所有，侵权必究】未经授权，禁止复制转载。的问题。