React - 如何在单击按钮时在新窗口中打开组件？答案

【问题标题】：React - How to open a component in a new window on a button click?React - 如何在单击按钮时在新窗口中打开组件？
【发布时间】：2020-10-05 23:51:02
【问题描述】：

我正在React 中创建一个项目，并且我试图通过单击按钮在另一个窗口中打开canvasjs 图形。下面是 loadData.js 文件的代码，当程序运行时，我将单击按钮打开一个包含图表的单独窗口。我遇到的问题是该图包含在另一个名为 multiSeriesChart.js 的文件中，我不太确定如何在按钮内调用它。 React 中有什么东西可以用来做这件事吗？ window.open() 功能似乎不起作用。谢谢！

    openNewWindow = () => {
       const newWindow = window.open(); 
       newWindow.document.write(<MultiSeriesChart dataFromParent = {this.state} parentCallback/>);
    }


    render() {
        return (
            <div>
                <title>Program Controller</title>
                <h1>Program Controls: </h1>
                <button onClick={this.pressedLoad}>Load Data</button>
                <button id="multiSeriesChart" onClick={this.openNewWindow}>Open Multi-Series Graph</button>
            </div>
        );
    };
};

【问题讨论】：

你不能将 JSX 传递给window.open()；您必须将新窗口的内容视为单独的 HTML 文档。它当然可以显示自己的 React 应用程序，但因此将数据传递到那里只能通过已建立的方法（如 localStorage）起作用。如果您使用react-router，则可以使用/graph 之类的url 在新窗口中显示该路由的内容。
@ChrisG 好的，谢谢！使用 react-router 我可以将当前的 div 包装在其中并指定路由还是比这更复杂一点？
将主应用程序和图形部分包装在中，以及中的所有内容或多或少都可以解决问题，是的。
也可以使用React Portals，请看this post
@SomoKRoceS 这实际上确实创建了一个新窗口，但它没有呈现我的 canvasjs 图。它实际上只是重新打开了我的主网页的基本网址。如何让它在新网页中呈现图形？

标签： javascript reactjs

【解决方案1】：

您可以将React portal 用于此ReactDOM.createPortal。
你可以检查my answer 这个问题。虽然问题是关于电子应用程序，但同样的想法也适用于普通网页。

【讨论】：

这实际上确实创建了一个新窗口，但它没有呈现我的 canvasjs 图。它实际上只是重新打开了我的主网页的基本网址。如何让它在新网页中呈现图形？
新窗口将渲染一个新组件。您是否尝试将图形数据作为参数传递给组件并让它呈现这些数据？