模态对话框 – 如何创建一个React模态(附加“)与转换？

发布时间：2020-12-15 06:41:18 所属栏目：百科来源：网络整理

导读：在这个答案 http://stackoverflow.com/a/26789089/883571中有一个模态，它通过将它附加到 body创建一个基于React的模态。但是，我发现它与React提供的转换插件不兼容。如何创建一个过渡(在进入和离开)？在react conf 2015，Ryan Florence demonstrated usi

在这个答案 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>

jsbin demo

你也可以看看Ryan的react-modal，虽然我没有实际使用它，所以我不知道它是如何工作与动画。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!