Use ReactDOM.createPortal instead of ReactDOM.render for nested views

src/angularjs/ReactUIViewAdapterComponent.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import * as angular from 'angular';
 import * as ReactDOM from 'react-dom';
 import { hybridModule } from './module';
-import { UIView, UIViewProps, UIRouterConsumer, UIViewConsumer } from '@uirouter/react';
 import { filter } from '@uirouter/core';
-import { UIRouterContextComponent } from '../react/UIRouterReactContext';
+import ReactUIView from '../react/ReactUIView';
 
 // When an angularjs `ui-view` is instantiated, also create an react-ui-view-adapter (which creates a react UIView)
 hybridModule.directive('uiView', function() {
@@ -92,14 +90,24 @@ hybridModule.directive('reactUiViewAdapter', function() {
         }
 
         const props = { ...attrs, render, wrap: false, refFn: ref };
+        const setChildViewProps = (scope as any).setChildViewProps;
+        if (setChildViewProps) {
+          setChildViewProps(props, el);
+        } else {
+          ReactDOM.render<any>(<ReactUIView {...props} />, el as any);
+        }
         // console.log(`${$id}: rendering ReactUIView with props`, props);
-        ReactDOM.render<any>(<ReactUIView {...props} />, el as any);
       }
 
       scope.$on('$destroy', () => {
         destroyed = true;
-        const unmounted = ReactDOM.unmountComponentAtNode(el);
-        // console.log(`${$id}: angular $destroy event -- unmountComponentAtNode(): ${unmounted}`, el);
+        const setChildViewProps = (scope as any).setChildViewProps;
+        if (setChildViewProps) {
+          setChildViewProps(null);
+        } else {
+          const unmounted = ReactDOM.unmountComponentAtNode(el);
+          // console.log(`${$id}: angular $destroy event -- unmountComponentAtNode(): ${unmounted}`, el);
+        }
         // Remove using jQLite element for cross-browser compatibility.
         elem.remove();
       });
@@ -108,17 +116,3 @@ hybridModule.directive('reactUiViewAdapter', function() {
     },
   };
 });
-
-const InternalUIView = UIView.__internalViewComponent;
-
-const ReactUIView = ({ refFn, ...props }) => (
-  <UIRouterContextComponent parentContextLevel="3">
-    <UIRouterConsumer>
-      {router => (
-        <UIViewConsumer>
-          {parentUiView => <InternalUIView {...props} ref={refFn} parentUIView={parentUiView} router={router} />}
-        </UIViewConsumer>
-      )}
-    </UIRouterConsumer>
-  </UIRouterContextComponent>
-);

src/react/AngularUIView.tsx

@@ -22,6 +22,8 @@ export class AngularUIView extends React.Component<any, any> {
     this.state = {
       $scope: $rootScope.$new(),
     };
+
+    this.state.$scope.setChildViewProps = this.props.setChildViewProps;
   }
 
   render() {

src/react/ReactUIView.tsx

@@ -0,0 +1,19 @@
+import { UIRouterConsumer, UIView, UIViewConsumer } from "@uirouter/react";
+import { UIRouterContextComponent } from "./UIRouterReactContext";
+import * as React from "react";
+
+const InternalUIView = UIView.__internalViewComponent;
+
+const ReactUIView = ({ refFn, ...props }) => (
+  <UIRouterContextComponent parentContextLevel="3" inherited={false}>
+    <UIRouterConsumer>
+      {router => (
+        <UIViewConsumer>
+          {parentUiView => <InternalUIView {...props} ref={refFn} parentUIView={parentUiView} router={router} />}
+        </UIViewConsumer>
+      )}
+    </UIRouterConsumer>
+  </UIRouterContextComponent>
+);
+
+export default ReactUIView;

src/react/UIRouterReactContext.tsx

@@ -7,6 +7,7 @@ import IInjectorService = angular.auto.IInjectorService;
 
 export interface IUIRouterContextComponentProps {
   parentContextLevel?: string;
+  inherited?: boolean;
 }
 
 export interface IUIRouterContextComponentState {
@@ -27,6 +28,7 @@ export class UIRouterContextComponent extends React.Component<
 > {
   public static defaultProps: Partial<IUIRouterContextComponentProps> = {
     parentContextLevel: '0',
+    inherited: true,
   };
 
   public state: IUIRouterContextComponentState = {
@@ -71,13 +73,14 @@ export class UIRouterContextComponent extends React.Component<
 
   private renderChild(child: ReactElement<any>) {
     // console.log('renderChild()', child);
+    const inherited = this.props.inherited;
     return (
       <UIRouterConsumer>
         {routerFromReactContext => (
-          <UIRouterProvider value={routerFromReactContext || this.state.router}>
+          <UIRouterProvider value={inherited && routerFromReactContext || this.state.router}>
             <UIViewConsumer>
               {parentUIViewFromReactContext => (
-                <UIViewProvider value={parentUIViewFromReactContext || this.state.parentUIViewAddress}>
+                <UIViewProvider value={inherited && parentUIViewFromReactContext || this.state.parentUIViewAddress}>
                   {child}
                 </UIViewProvider>
               )}

src/react/UIViewMonkeyPatch.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { UIView } from '@uirouter/react';
 import { AngularUIView } from './AngularUIView';
+import ReactUIView from "./ReactUIView";
 
 /**
  * Monkey patches the @uirouter/react UIView such that:
@@ -20,10 +22,44 @@ import { AngularUIView } from './AngularUIView';
  */
 const realRender = UIView.prototype.render;
 
+class PortalView extends React.PureComponent {
+  state = {
+    props: null,
+    target: null,
+  };
+
+  setChildViewProps = (props, target) => {
+    this.setState({ props, target });
+  };
+
+  renderPortal() {
+    if (!this.state) return null;
+    const { props, target } = this.state;
+    if (props && target) {
+      return ReactDOM.createPortal(
+        <ReactUIView {...props} />,
+        target
+      );
+    }
+    return null;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <AngularUIView {...this.props} setChildViewProps={this.setChildViewProps}/>
+        {this.renderPortal()}
+      </React.Fragment>
+    )
+  }
+}
+
 UIView.prototype.render = function() {
   if (this.props.wrap === false) {
     return realRender.apply(this, arguments);
   }
 
-  return <AngularUIView {...this.props} />;
+  return (
+    <PortalView {...this.props}/>
+  );
 };