模态对话框 – 如何创建一个React模态(附加“)与转换？

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

如何创建一个过渡(在进入和离开)？

在react conf 2015，Ryan Florence demonstrated using portals.以下是如何创建一个简单的门户组件…

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

你也可以看看Ryan的react-modal，虽然我没有实际使用它，所以我不知道它是如何工作与动画。