小编典典

如何创建带有过渡的React Modal(追加到``)?

reactjs

这个答案有一个模态https://stackoverflow.com/a/26789089/883571,它通过将附加到来创建基于React的模态<body>。但是,我发现它与React提供的过渡插件不兼容。

如何创建一个带有过渡的(进入和离开期间)?


阅读 273

收藏
2020-07-22

共1个答案

小编典典

在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,尽管我实际上没有使用它,所以我不知道它在动画中的效果如何。

2020-07-22