父组件卸载时如何保留子组件？React新窗口Portal渲染问题

Great question! The core issue here is that when your parent component unmounts, React recursively unmounts all its child components—including your MyWindowPortal. If your original implementation includes cleanup logic in componentWillUnmount (like closing the external window), that’s exactly why your portal content gets destroyed alongside the parent.

Here are two reliable approaches to decouple the portal’s lifecycle from the parent:

Approach 1: Render the Portal to a Global, Parent-Independent Container #

Instead of rendering the portal as a child of your parent component, mount it directly to a global DOM container that’s not tied to the parent’s DOM tree. This way, the parent’s unmount won’t trigger the portal’s unmount.

Step 1: Create a Global Container #

Add this once when your app initializes (e.g., in your root component or entry file):

// Create a hidden global container for portal rendering
const globalPortalRoot = document.createElement('div');
globalPortalRoot.style.display = 'none';
document.body.appendChild(globalPortalRoot);

Step 2: Modify the Parent Component #

Render the portal directly to the global container instead of including it as a child:

class ParentComponent extends React.Component {
  // Store a reference to the portal instance for later control
  portalInstance = null;

  openExternalWindow = () => {
    // Render the portal to the global container
    this.portalInstance = ReactDOM.render(
      <MyWindowPortal>
        {/* Your portal content goes here */}
        <h1>Persistent Content!</h1>
        <p>This won't disappear when the parent unmounts.</p>
      </MyWindowPortal>,
      globalPortalRoot
    );
  };

  componentWillUnmount() {
    // Do NOT unmount the portal here—leave it running
    // If you need to clean it up later, save the reference and call unmount manually
  }

  render() {
    return (
      <button onClick={this.openExternalWindow}>
        Open Persistent Window
      </button>
    );
  }
}

Step 3: Update the Portal Component #

Remove the automatic cleanup in componentWillUnmount and instead listen for the external window’s close event to clean up properly:

class MyWindowPortal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.containerEl = document.createElement('div');
    this.externalWindow = null;
  }

  componentDidMount() {
    // Open the external window
    this.externalWindow = window.open('', '', 'width=600,height=400');
    
    if (this.externalWindow) {
      // Attach the portal container to the new window's body
      this.externalWindow.document.body.appendChild(this.containerEl);
      
      // Clean up only when the user closes the external window
      this.externalWindow.addEventListener('beforeunload', () => {
        ReactDOM.unmountComponentAtNode(this.containerEl);
        this.externalWindow = null;
      });
    }
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.containerEl
    );
  }

  // REMOVE the default cleanup logic to prevent parent unmount from closing the window
  // componentWillUnmount() {
  //   if (this.externalWindow) this.externalWindow.close();
  // }
}

Approach 2: Use Global State/Context to Control Portal Visibility #

Move the portal’s visibility state to a global context or state manager (like Redux) so it’s not tied to the parent component’s lifecycle. The portal will only unmount when you explicitly trigger it via global state.

Step 1: Create a Portal Context #

const PortalContext = React.createContext();

function PortalProvider({ children }) {
  const [isPortalOpen, setIsPortalOpen] = React.useState(false);

  return (
    <PortalContext.Provider value={{ isPortalOpen, setIsPortalOpen }}>
      {children}
      {/* Render the portal globally, outside the parent component */}
      {isPortalOpen && (
        <MyWindowPortal>
          <h1>Persistent Portal via Context</h1>
        </MyWindowPortal>
      )}
    </PortalContext.Provider>
  );
}

Step 2: Wrap Your App with the Provider #

Make sure the provider is higher up in the component tree than your parent component:

// In your root app component
function App() {
  return (
    <PortalProvider>
      <ParentComponent />
    </PortalProvider>
  );
}

Step 3: Update the Parent Component #

Use the context to trigger the portal without rendering it as a child:

function ParentComponent() {
  const { setIsPortalOpen } = React.useContext(PortalContext);

  return (
    <button onClick={() => setIsPortalOpen(true)}>
      Open Portal via Context
    </button>
  );
}

Key Notes #

• Avoid Memory Leaks: Always clean up the portal when the external window is closed (as shown in Approach 1) or when you no longer need it (e.g., via a "Close" button in the portal that updates the global state).
• Manual Control: If you need to close the portal later (not just when the user closes the window), keep a reference to the portal instance or use global state to trigger unmount.

内容的提问来源于stack exchange，提问作者Crotaphytus