这个答案有一个模态https://stackoverflow.com/a/26789089/883571,它通过将附加到来创建基于React的模态<body>。但是,我发现它与React提供的过渡插件不兼容。
<body>
如何创建一个带有过渡的(进入和离开期间)?
在2015年的React Conf上,Ryan Florence 使用门户进行了演示。这是创建简单Portal组件的方法…
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,尽管我实际上没有使用它,所以我不知道它在动画中的效果如何。