reactjs - React 在使用 npm 启动项目时打开多个选项卡

我正在制作 react 应用程序,它应该在多个监视器上运行。默认情况下 npm start 运行 index.js 脚本并渲染的“根”组件。但是,我需要在 npm 启动时打开不同的窗口/选项卡(windows1、window2、window3 具有不同的内容)。有没有办法实现它?

任何帮助,将不胜感激。

回答1

我使用并发和等待解决了这个问题。 package.json 内部:

"sidetask":"wait-on http://localhost:3000 && node src/sidetask.js",
"start-all": "concurrently \"npm run sidetask\" \"npm start\""

回答2

运行 npm 时自动打开浏览器仅适用于您的本地计算机。人们将通过访问应用程序所在服务器的 URL 来访问应用程序。

您可以使用 window.open 打开选项卡。

如果您想在页面加载时自动打开选项卡,您可以将其包装在 useEffect 调用中,并根据应用程序的设置将其放置在合适的位置。它看起来像这样:

[tabsOpened, setTabsOpened] = useState(false)

useEffect(() => {
    if (!window || tabsOpened) return null;
    window.open("http://example.com", "_blank");
    window.open("http://example1.com", "_blank");
    window.open("http://example2.com", "_blank");
    // etc...
    setTabsOpened(true)
}, [window])

请注意,某些浏览器/插件可能会阻止您打开多个选项卡。我刚刚做了一个测试,它似乎在 Safari 中有效,但在 Chrome 中无效。

如果您想指定每个窗口在哪个监视器上打开,事情会变得更复杂一些。但是这个问题似乎是一个很好的起点:https://stackoverflow.com/questions/16363474/window-open-on-a-multi-monitor-dual-monitor-system-where-does-window-pop-up

相似文章