如何从2个不同的反应应用中渲染2个组件的组合？

发布于 2025-01-25 10:33:37 字数 882 浏览 2 评论 0原文

我在一个页面上有2个独立的反应应用程序（在DOM中的不同容器上拨打React> Reactdom.render（））。我可以将JavaScript值从一个将其传递到另一个。

我在应用程序1中有一个组件，我需要与应用程序2中定义的儿童进行渲染。我尝试将渲染支架从应用程序1传递到应用程序2：

// Application 1 code
application2.send({
  renderApp1Component: (app2Component) => (
    <App1Component>{app2Component}</App1Component>
  )
});

然后在应用程序2中调用此渲染支柱2：

// Application 2 code
renderApp1Component(<App2Component />);

我在调用<时会遇到错误<代码> renderapp1component（），因为应用2不能呈现＆lt; app1component＆gt;，因为它是在另一个React应用程序的上下文中定义的。

有没有办法以某种方式执行此操作？我当时认为也许有一种方法可以以某种方式预编译＆lt; app2component＆gt; to dom Element中的应用程序2，以便不需要在应用程序1中完全编译它？然后将该结果发送到应用程序1，以便＆lt; app1component＆gt;将像其他任何html元素一样包含它，而无需任何汇编。

原文

I have 2 independent React applications on a single page (2 calls to ReactDOM.render() on different containers in DOM). I can pass JavaScript values from one into another.

I have a component in Application 1, which I need to render with children defined in Application 2. I tried passing a Render Prop from Application 1 to Application 2:

// Application 1 code
application2.send({
  renderApp1Component: (app2Component) => (
    <App1Component>{app2Component}</App1Component>
  )
});

Then calling this Render Prop in Application 2:

// Application 2 code
renderApp1Component(<App2Component />);

I'm getting errors when calling renderApp1Component(), as it seems Application 2 cannot render <App1Component>, as it's defined in context of another React application.

Is there a way to do this somehow? I was thinking maybe there is a way to somehow pre-compile <App2Component> in Application 2 to DOM element, so that it doesn't need to be fully compiled in Application 1? Then send that result to Application 1, so that <App1Component> would include it like any other HTML element without any compilation needed.

分享到QQ

分享到微博