Javascript 在新窗口中单击以打开零部件

我有一个显示数据的组件。单击父组件的按钮/链接时，我必须在新窗口中打开此组件

export default class Parent extends Component {
    construtor(props) {
        super(props);
    }

    viewData = () => {
        window.open('childcomponent.js','Data','height=250,width=250');
    }

    render() {
        return (
            <div> <a onclick={this.viewData}>View Data</a></div>
        )
    }
}

我不知道如何调用另一个组件并将其显示在新的指定大小窗口中

---

实际上，我需要向该子组件发送一个道具，它将使用该道具从数据库中获取数据并进行渲染。

您不会直接打开该组件。您需要一个新的页面/视图来显示组件。当您打开窗口时，您将把它指向适当的URL

至于大小，您可以在open的第三个参数中以字符串形式提供它，实际上您的参数是正确的：

window.open('http://example.com/child-path','Data','height=250,width=250');

然而，请注意，出于各种原因，浏览器可能不尊重您的宽度和高度要求。出于这个原因，如果打开的空间确实比您想要的大，那么最好也应用适当的CSS来获得适当大小的空间。

您可以使用它在新窗口中渲染组件，如his中所述：

这个答案是基于。它已修改为在Edge中工作。要在Edge div中执行此操作，必须使用样式元素

---

完整的修改源代码可以在这里找到

投票结果非常好

只需在这里留下一个功能组件版本，以防人们将来搜索它

const RenderInWindow = (props) => {
  const [container, setContainer] = useState(null);
  const newWindow = useRef(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(
        "",
        "",
        "width=600,height=400,left=200,top=200"
      );
      // Append container
      newWindow.current.document.body.appendChild(container);

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

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

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

---

添加到当前答案-要将样式从原始窗口复制到弹出窗口，可以执行以下操作：

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

然后加上

copyStyles(window.document, popupWindow.document);

---

在调用window.open之后，并且一旦ref被初始化，我在窗口挂载后的第二次渲染中遇到了问题。除了这个集装箱船是空的以外，没有任何东西能告诉它重新装载。为了修复这个问题，我在componentDidMount的末尾添加了一个setState{moounted:true}。但它仍然不适用于我的IE边缘。还有其他解决方案吗？我可以使用此选项在弹出窗口中加载react组件。但这些风格并没有延续下去。弹出窗口中加载的组件不包含应用程序中定义的样式。有没有办法将样式传递到弹出窗口？这个解决方案很好地包装在这里的npm模块中：我们如何携带应用程序样式和数据。@Rahul see@rob gordon知道为什么在我的create react应用程序生产构建中不起作用吗？@amiregelz很难猜到w/o Seing–但是如果你有时做SSR，我确实学到了这一点document.createElement在服务器上不可用，可能会失败。在这种情况下，可以在useEffect中创建div。不知道你的情况是否就是这样

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

copyStyles(window.document, popupWindow.document);