在这个答案
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,虽然我没有实际使用它,所以我不知道它是如何工作与动画。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。