时间戳

首页 > 解决方案 > 将 React 应用程序的一部分弹出到新窗口中

javascript - 将 React 应用程序的一部分弹出到新窗口中

问题描述

我有一个看起来像这样的组件：

在此处输入图像描述

我希望能够在新窗口中加载它。我已经查阅了其他答案和相关文章，并且能够让 dom 树在门户中呈现，但不是更多。

  1. onMouseEnter例如不会在新窗口中触发。
  2. 我react-tippy似乎在全球范围内做了一些自动的事情，这似乎不起作用/导致新窗口出现问题
  3. 我有一个由three.js 管理的webgl 画布。它也有点自动化，因为它不是由 react 管理的，而是位于<body>并覆盖整个窗口。React 将“视图”管理到这个画布中。

我正在努力理解应该如何处理。例如，这就是我的ReactDOM.render电话的样子：

const webglViewManager = new WebGLViewManager()
const threeRenderer = new ThreeRenderer(webglViewManager)

render(
  <ThreeContext.Provider value={{ webglViewManager, threeRenderer }}>
    <Provider store={store}>
      <ReactApp store={store} />
    </Provider>
  </ThreeContext.Provider>,
  document.getElementById('main')
)

我试图将一个文档（我正在使用的那个，或者来自弹出窗口的那个）传递给我的三个上下文，让它在那里附加一个画布，但这似乎并不奏效。总的来说，我什至不敢尝试这个，因为我觉得我在推理这一切都是错误的。

使用这些相对复杂的系统（tippy mounts，three.js 的方式）和分布在多个窗口的门户，我可以获得多少里程？仅制作一个单独的“应用程序”以加载到另一个窗口中是否更有意义，如果是这样，那将如何实现？加载相同的入口点，但路由到这个视图，另一个应用程序......？

标签： javascripthtmlreactjs

解决方案

我已经成功通过window.open. 我发现有用的是创建一个窗口上下文，即：

import { createContext, useContext } from 'react'

export const WindowContext = createContext<Window | null>(null as any)
export const useWindowContext = () => useContext(WindowContext)

并将此提供程序放在我的新窗口周围。我不得不更改所有安装到新窗口主体的门户，但到目前为止这似乎工作正常。

推荐阅读