MENU


Event Bubbling Through Portals

Events are bubbled up through the class component even though the child attached through a portal lies outside the DOM hierarchy of the parent.


RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
   <script src="https://unpkg.com/react@17/umd/react.development.js"
               crossorigin></script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
                crossorigin></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <div id="app-root"></div>
   <div id="modal-root"></div>
   <script type="text/babel">
      class Modal extends React.Component {
         render() {
            return ReactDOM.createPortal(
        this.props.children,
               document.getElementById('modal-root'));
       }
      }
      class Parent extends React.Component {
         render() {
            return (<div onClick={()=>alert('clicked')}>
                           <Modal>
                               <Child />
                           </Modal>
                      </div>);
       }
      }
      function Child() {        // The click event on this button will bubble up to parent,        // because there is no 'onClick' attribute defined
          return (<div className="modal">
                        <button>Click</button>
                     </div>);
      }
      ReactDOM.render(<Parent />, document.getElementById('app-root'));
   </script></body></html>

In addition to event bubbling, contexts work similarly, affecting descendent components that are not attached directly to the parent DOM node.