如果有人需要，这里有一个功能组件的工作示例

const Parent = () => {
  const [showPopout, setShowPopout] = useState(false)
  const [newWindowNode, setNewWindowNode] = useState(null)

  const nwRef = useCallback(node => setNewWindowNode(node), [])

  return showPopout 
    ? (
      <StyleSheetManager target={newWindowNode}>
        <NewWindow
          title="Title"
          features={{width: '960px', height: '600px'}}
          onUnload={() => setShowPopout(false)}
        >
          <div ref={nwRef}>
            <Popout isPopout={true}>
              ... popup stuff
            </Popout>
          </div>
        </NewWindow>
      </StyleSheetManager>
    ) : null
}

选项1解决方案实际上可以通过styled-component API实现：

import React from 'react';
import styled, {StyleSheetManager} from 'styled-components';
import NewWindow from 'react-new-window';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPopout: false,
    };
    this.nwRef = React.createRef();
  }

  render () {
    ... some stuff
    this.state.showPopout && (
    <StyleSheetManager target={this.nwRef.current}>
      <NewWindow
        title="Title"
        features={{width: '960px', height: '600px'}}
        onUnload={() => this.setState({showPopout: false})}
      >
        <div ref={this.nwRef}>
          <Popout isPopout={true}>
            ... popup stuff
          </Popout>
        </div>
      </NewWindow>
    </StyleSheetManager>
  )}
}

使用StyleSheetManager给予我的性能真的很差，也许样式表在每次重新渲染时都被重新创建。我更喜欢简单地复制样式表，就像www.example.com中建议https://github.com/JakeGinnivan/react-popout/issues/15#issuecomment-527429574。

import React, { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

// src: https://stackoverflow.com/questions/47574490/open-a-component-in-new-window-on-a-click-in-react
// you may also check: https://github.com/rmariuzzo/react-new-window/blob/main/src/NewWindow.js
// for stylesheet copy see: https://github.com/JakeGinnivan/react-popout/issues/15
export const RenderInWindow = (props: React.PropsWithChildren<
  {
    winName?: string;
  }
>) => {
  const [container, setContainer] = useState<HTMLDivElement|null>(null);
  const newWindow = useRef<Window|null>();

  useEffect(() => {
    // Create container element on client-side
    setContainer(document.createElement("div"));
  }, []);

  useEffect(() => {
    // When container is ready
    if (container) {
      // Create window
      newWindow.current = window.open(
        '',
        props.winName ?? '',
        "width=600,height=400,left=200,top=200"
      );

      if (!newWindow.current) {
        throw new Error('Failed to create window.');
      }

      // Append container
      newWindow.current.document.body.appendChild(container);

      // Save reference to window for cleanup
      const curWindow = newWindow.current;

      copyStyles(document, newWindow.current!.document)

      // Return cleanup function
      return () => curWindow.close();
    }
  }, [container, props.winName]);

  return container && createPortal(props.children, container);
};

const copyStyles = (src: Document, dest: Document) => {
  Array.from(src.styleSheets).forEach(styleSheet => {
    dest.head.appendChild(styleSheet.ownerNode!.cloneNode(true))
  })
  Array.from(src.fonts).forEach(font => dest.fonts.add(font))
}