在这个答案
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>
你也可以看看Ryan的react-modal，虽然我没有实际使用它，所以我不知道它是如何工作与动画。
