ReactJs Modal Verwenden von Javascript und CSS

Question

Wie readjs modales Fenster mit Body-End-Tag anhängen, um die modale Positionierung absolut mit Body-Tag festlegen.

Hier ist ein Beispiel in der anderen Komponente hinzugefügt.

<div className="modal"> 
    <p>Model Pop-up <button onClick={this.handleClick}>here</button></p> 
    <div id="js-modal-inner" className="modal"> 
     <div className="modal__content js-dialog"> 
     <a className="modal__close" onClick={this.handleClose}>&times;</a> 
     <header className="modal__header"> 
      <h2 className="modal__title">Split Ticket:</h2> 
     </header> 
     <div className="modal__content--inner"> 
      {this.props.children} 
     </div> 
     </div> 
    </div> 
    <div className="modal__overlay js-fade"></div> 
    </div> 

Answer 1

Dies wird normalerweise als "Schichten" in reagieren bezeichnet. Siehe this fiddle

/** @jsx React.DOM */ 

var ReactLayeredComponentMixin = { 
    componentWillUnmount: function() { 
     this._unrenderLayer(); 
     document.body.removeChild(this._target); 
    }, 
    componentDidUpdate: function() { 
     this._renderLayer(); 
    }, 
    componentDidMount: function() { 
     // Appending to the body is easier than managing the z-index of everything on the page. 
     // It's also better for accessibility and makes stacking a snap (since components will stack 
     // in mount order). 
     this._target = document.createElement('div'); 
     document.body.appendChild(this._target); 
     this._renderLayer(); 
    }, 
    _renderLayer: function() { 
     // By calling this method in componentDidMount() and componentDidUpdate(), you're effectively 
     // creating a "wormhole" that funnels React's hierarchical updates through to a DOM node on an 
     // entirely different part of the page. 
     React.renderComponent(this.renderLayer(), this._target); 
    }, 
    _unrenderLayer: function() { 
     React.unmountComponentAtNode(this._target); 
    } 
}; 

var Modal = React.createClass({ 
    killClick: function(e) { 
     // clicks on the content shouldn't close the modal 
     e.stopPropagation(); 
    }, 
    handleBackdropClick: function() { 
     // when you click the background, the user is requesting that the modal gets closed. 
     // note that the modal has no say over whether it actually gets closed. the owner of the 
     // modal owns the state. this just "asks" to be closed. 
     this.props.onRequestClose(); 
    }, 
    render: function() { 
     return this.transferPropsTo(
      <div className="ModalBackdrop" onClick={this.handleBackdropClick}> 
       <div className="ModalContent" onClick={this.killClick}> 
        {this.props.children} 
       </div> 
      </div> 
     ); 
    } 
}); 

var ModalLink = React.createClass({ 
    mixins: [ReactLayeredComponentMixin], 
    handleClick: function() { 
     this.setState({shown: !this.state.shown}); 
    }, 
    getInitialState: function() { 
     return {shown: false, ticks: 0, modalShown: false}; 
    }, 
    componentDidMount: function() { 
     setInterval(this.tick, 1000); 
    }, 
    tick: function() { 
     this.setState({ticks: this.state.ticks + 1}); 
    }, 
    renderLayer: function() { 
     if (!this.state.shown) { 
      return <span />; 
     } 
     return (
      <Modal onRequestClose={this.handleClick}> 
       <h1>Hello!</h1> 
       Look at these sweet reactive updates: {this.state.ticks} 
      </Modal> 
     ); 
    }, 
    render: function() { 
     return <a href="javascript:;" role="button" onClick={this.handleClick}>Click to toggle modal</a>; 
    } 
}); 

React.renderComponent(<ModalLink />, document.body);