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

Question

我有一个外部组件(传单 map )。这个组件有很多 child 。应用程序根据状态、路线等在 map 上绘制不同的东西。
使用 Leaflet(或只是 Map)组件，如路径、标记等，需要我直接在 map 内渲染它们，因此上下文可用(标记调用挂载上的 Map 实例等)。
然而，这变成了不可维护的代码，因为我的 map 很大，有很多条件渲染的子节点(如果路由 A 然后渲染组件 X 和 Y)。
我想实现一种在与其域相关的适当位置呈现 child 的方法( map 只是我注入(inject)的一个容器)。但它们需要上下文。
我试图用 Portals 来解决这个问题，但它不起作用，因为 React 在上下文之外呈现子项，而只是项目在内部呈现 DOM。
所以我需要这样的东西:门户组件，它一直安装在 Map 内部，并以某种方式获取它可以访问的所有上下文，并以某种方式将其注入(inject)到投影组件中。
当然，它不一定是 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可以对组件进行排序并确保它们以确定的顺序呈现。
但是上下文没有被保留，并且目的地的上下文是组件所看到的，这并不理想。