[REACTJS] 자바 스크립트와 CSS를 사용 ReactJs 모달

자바 스크립트와 CSS를 사용 ReactJs 모달

해결법

1. ---

   1.이것은 일반적으로 '층'의 반응이라고합니다. 이 바이올린을 참조하십시오

   이것은 일반적으로 '층'의 반응이라고합니다. 이 바이올린을 참조하십시오

   /** @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);
   

from https://stackoverflow.com/questions/26787198/reactjs-modal-using-javascript-and-css by cc-by-sa and MIT license