How to create a React Modal(which is append to `lt;bodygt;`) with transitions?(如何创建带有转换的 React 模态(附加到`lt;bodygt;`)?)

本文介绍了如何创建带有转换的 React 模态(附加到`<body>`)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

There is a modal in this answer https://stackoverflow.com/a/26789089/883571 which is creating a React-based Modal by appending it to <body>. However, I found it not compatible with the transition addons provided by React.

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

How to create one with transitions(during enter and leave)?

推荐答案

在 react conf 2015 上，Ryan Florence 展示了使用门户.以下是创建简单 Portal 组件的方法...

At react conf 2015, Ryan Florence demonstrated using portals. Here's how you can create a simple Portal component...

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 中执行的所有操作都可以在门户内部执行...

and then everything you can normally do in React you can do inside of the portal...

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