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

Posted 2023-04-14

【中文标题】将未知上下文传递给子组件

【英文标题】：Pass unknown context to children component

【发布时间】：2019-10-17 00:15:09

【问题描述】：

我有一个外部组件（传单地图）。这个组件有很多个子组件。应用程序根据状态、路线等在地图上绘制不同的东西。 使用 Leaflet（或只是 Map）组件，如 Paths、Markers 等，需要我直接将它们渲染 inside 地图，因此上下文可用（Marker 在安装时调用 Map 实例等）。

然而，这变成了不可维护的代码，因为我的地图很大，有很多条件渲染的子节点（如果路由 A 然后渲染组件 X 和 Y）。

我想实现一种在与其域相关的适当位置呈现子级的方法（地图只是我注入的一个容器）。但它们需要上下文。 我试图用 Portals 来解决这个问题，但它不起作用，因为 React 在 outside 上下文中渲染子元素，而只是在里面渲染 DOM。

所以我需要这样的东西：门户组件，它始终安装在 Map 中，以某种方式获取它可以访问的所有上下文，以某种方式将其注入到投影分量。

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

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

它会像这样构造一棵树：

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

如何做到这一点？

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

【参考方案1】：

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

但是上下文没有被保留，并且目的地的上下文是组件看到的不理想的内容。