将未知的上下文传递给子组件

Question

我有外部组件（传单地图）。这个组件有很多孩子。应用程序根据状态，路线等在地图上绘制不同的内容。 使用诸如路径，标记之类的Leaflet（或仅作为Map）组件需要我直接在地图内部中呈现它们，因此上下文可用（Marker在mount上调用Map实例）。

但是，这变成了不可维护的代码，因为我的地图很大，有很多条件渲染的子对象（如果路线A则渲染组件X和Y）。

我想找到一种方法来在与他们的域相关的适当位置渲染子对象（地图只是我注入的容器）。但是它们需要上下文。 我试图通过Portal来解决这个问题，但是由于React在外部上下文中渲染了子对象，而在项目内部仅渲染了DOM，因此它不起作用。

所以我需要这样的东西：门户组件，该组件一直安装在Map中，并且以某种方式获取所有可以访问的上下文，然后以某种方式注入到其中。投影组件。

当然不必是 react门户，但是我希望API看起来像这样：

<SomeDomainComponent>
  <MapPortal>
    <Marker position={[50, 20]} />
  </MapPortal>
</SomeDomainComponent>

它会像这样构造一棵树：

<LeafletMap>
  <Marker position={[50, 20]} />
</LeafletMap>

如何实现？

我考虑了自己的上下文，但是无法将React组件序列化为上下文值吗？

Answer 1

我使用react-through通过SVG抽象来实现组件的隐形传送。 通过在agent上使用单调递增的数字id，throughArea可以对组件进行排序，并确保以确定的顺序呈现它们。

但是不会保留上下文，并且目标的上下文是组件看到的，这并不理想。