如何创建带有转换的 React 模态(附加到`<body>`)? [英] How to create a React Modal(which is append to `<body>`) with transitions?
问题描述
这个答案中有一个模式 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>
jsbin 演示
你也可以看看 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屋！
