如果没有非 React DOM 父级，则无法卸载 React 门户 - 如何在删除父级之前手动卸载门户？

Question

I have a Blaze template application outside of the main react app that houses a container for a React portal to be rendered within it. On render of the Blaze template, we load data and send a custom event to an event listener inside the React application, which then renders the portal.

This works perfectly inside Chrome, but with Internet Explorer 11, the rendering and derendering of both the portal and template is a lot slower, and we run into a race condition??

On the second render of the Blaze template, React goes through its lifecycle and attempts to unmount all the children of the previous portal container, however - they do not exist since we've removed that DOM node entirely (using .html('')), and we run into an error within ReactDOM where the child is not found.

function removeChildFromContainer(container, child) {
  if (container.nodeType === COMMENT_NODE) {
    container.parentNode.removeChild(child);
  } else {
    container.removeChild(child); // Error on this line. 
  }
}

I've attempted to remove unmount the portal by sending a custom event before the existing code removes the DOM container.

    //Derender the previous portal if it exists
    if (window.isEvalTool) {
        console.log('removing the portal')
        // Send an event to React to unmount the previous portal node for IE
        var container = document.getElementById('eval-panel-root');
        var removePortal = new CustomEvent("readyForPortalRemoval", {
            detail: container
        });
        window.dispatchEvent(removePortal);
    }
    $(findingContainer).html('');


// Code that should unmount the component manually
        window.addEventListener('readyForPortalRemoval', function (event) {
            console.log('removing previous portal container');
            var removed = ReactDOM.unmountComponentAtNode(event.detail);
            console.log(removed); // This usually returns false, meaning it 
            // couldn't find it. 
        })

Right now the problem is that unmountComponentAtNode doesn't seem to work for my portal (which is a classical component) - even when passing the direct parent container. I thought it might be because events aren't guaranteed to fire immediately and so it might be looking for the container only after the .html('') call, but that isn't the issue, after placing the remove portal event right after the create portal event (no removal of html between those two calls).

Any information on how I can gracefully unmount and derender the portal before its parent container gets replaced by Blaze would be extremely helpful!

Thanks in advance.

I expected to at least have a successful removal of the portal at some point but have not. I cannot remove the html.('') call because that is how the current templating engine replaces templates.

Answer 1

I had the same issue when my component was removed from DOM tree by an external framework. In my case React mounting point has been replaced by aspx UpdatePanel postBack. In order to fix it, I had to move my component out of the Panel and mount it through React.Portal.

Everything now works perfectly fine but it seems that IE has a little different implementation of removeChild function - when the child doesn't exist an error is thrown. so I had to globally overite it to handle "NotFoundError" issue.

   <script type="text/javascript">
          function isIE() {
              ua = navigator.userAgent;
              /* MSIE used to detect old browsers and Trident used to newer ones*/
              var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

              return is_ie;
          }
          if (isIE()) {
              //Dev note: IE only - React JS throws NotFoundError when removeChildFromContainer inside of React DOM liv and child container doens't contain coresponding node. 
              let oldRemoveChild = HTMLElement.prototype.removeChild;
              HTMLElement.prototype.removeChild = function () {
                  try {
                          oldRemoveChild.apply(this, arguments);
                  }
                  catch (error) {

                      if (!!error && !!error.message && error.message === "NotFoundError") {
                          console.warn("IE NotFoundError handled")
                      }
                      else {
                          throw error;
                      }
                  }
              }
          }
    </script>