如何使用转换创建一个React模态（附加到`< body>`）？ [英] How to create a React Modal(which is append to `<body>`) with transitions?
问题描述
这个答案中有一个模式 https://stackoverflow.com/a/26789089/883571 正在创建基于React的模态，将其附加到< body> 。但是，我发现它与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)?
推荐答案
在2015年的反应中，瑞安佛罗伦萨演示使用门户网站。以下是如何创建一个简单的 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>
jsbin demo
您还可以查看Ryan的 react-modal ，虽然我还没有真正使用它，所以我不知道它对动画的效果如何。
jsbin demo
You can also have a look at Ryan's react-modal, although I haven't actually used it so I don't know how well it works with animation.
这篇关于如何使用转换创建一个React模态（附加到`< body>`）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
