时间戳

首页 > 解决方案 > 将未知上下文传递给子组件

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

问题描述

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

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

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

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

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

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

它将构造一棵像这样的树：

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

如何做到这一点？

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

标签： reactjsreact-contextreact-portal

解决方案

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

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

推荐阅读