How to create a React Modal(which is append to `<body>`) with transitions?

后端未结

关注

 8  1042

遥遥无期 2020-12-07 08:23

There is a modal in this answer https://stackoverflow.com/a/26789089/883571 which is creating a React-based Modal by appending it to . However, I fo

8条回答

孤城傲影 (楼主)

2020-12-07 08:40

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({this.props.children}, this.portalElement);
  }
});

and then everything you can normally do in React you can do inside of the portal...

    
       
         { activeDialog === 1 && 
            
              This is an animated dialog
             }

`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.

0 讨论(0)

查看其它8个回答