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

Question

我正在制作react应用程序，它应该在多个显示器上运行。默认情况下，npm start运行index.js脚本和render的"root"组件。但是，我需要在npm start上打开不同的窗口/选项卡(windows1, window2, window3具有不同的内容)。有办法实现吗?

如有任何帮助，不胜感激。

Answer 1

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

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

Answer 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。

如果您想指定每个窗口在哪个监视器上打开，事情会变得有点复杂。但这个问题似乎是一个很好的起点:多监视器/双监视器系统上的window.open() -窗口在哪里弹出?