大佬教程收集整理的这篇文章主要介绍了如何创建带有过渡的React Modal（追加到``）？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何创建带有过渡的React Modal（追加到``）？？

开发过程中遇到如何创建带有过渡的React Modal（追加到``）？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何创建带有过渡的React Modal（追加到``）？的解决方法建议，希望对你解决如何创建带有过渡的React Modal（追加到``）？有所启发或帮助；

在2015年的React Conf上，Ryan Florence使用门户进行了演示。这是创建简单Portal组件的方法…

var Portal = React.createClass({
  render: () => null,
  portalElement: null,
  componentDIDMount() {
    var p = this.props.portalID && document.getElementByID(this.props.portalID);
    if (!p) {
      var p = document.createElement('div');
      p.ID = this.props.portalID;
      document.body.appendChild(p);
    }
    this.portalElement = p;
    this.componentDIDUpdate();
  },
  componentwillUnmount() {
    document.body.removeChild(this.portalElement);
  },
  componentDIDUpdate() {
    React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);
  }
});

然后您通常可以在React中完成的所有操作都可以在门户内部进行…

    <Portal classname="DialogGroup">
       <ReactCSSTransitionGroup Transitionname="Dialog-anim">
         { activeDialog === 1 && 
            <div key="0" classname="Dialog">
              This is an animated dialog
            </div> }
       </ReactCSSTransitionGroup>
    </Portal>

[Jsbin demo](http://Jsbin.com/xivoka/2/edit?Js,output)

您也可以看看Ryan的react-modal，尽管我实际上没有使用它，所以我不知道它在动画中的效果如何。

解决方法

大佬总结

以上是大佬教程为你收集整理的如何创建带有过渡的React Modal（追加到``）？全部内容，希望文章能够帮你解决如何创建带有过渡的React Modal（追加到``）？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。