Skip to content

When using React components inside Angular ones, they are attached to the root of the VDOM tree & not removed #1

@bengry

Description

@bengry

From @bengry on July 22, 2018 7:57

When having the following structure: React -> (via ReactContent) Angular -> React,
the inner React component is attached to the root of the VDOM:
image

Instead of being nested under the ReactContent (seen above under the div with key="run"), it's nested as a root node in the VDOM.
These nodes are also kept in the VDOM after the DOM element has been removed.

Demonstrated here.

A workaround for this (but not a solution) by @xjerwa - in AngularReactRendererFactory:

end() {
    if (DEBUG) { console.log('RootRenderer > end > isRenderPending:', this.isRenderPending, 'reactRootNodes:', this.reactRootNodes); }
    // Flush any pending React element render updates.  This cannot be done
    // earlier (as is done for DOM elements) because React element props
    // are ReadOnly.
 
    // Potential fix: manually unmount ReactNodes that don't correspond to a DOM element
    for (let i = 0; i < this.reactRootNodes.length; i++) {
      const node = this.reactRootNodes[i] as any;
      if (!document.contains(node._parent) && ReactDOM.unmountComponentAtNode(node._parent)) {
        this.reactRootNodes.splice(i--, 1);
      }
    }
    // End potential fix
 
    if (this.isRenderPending) {
      // Remove root nodes that are pending destroy after render.
      this.reactRootNodes = this.reactRootNodes.filter(node => !node.render().destroyPending);
      this.isRenderPending = false;
    }
}

Copied from original issue: benfeely/angular-react#13

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions