Pass unknown context to children component

Question

I have an external component (Leaflet Map). This component has a lot of children. The application draws different things on the map depending on the state, routes, etc. Using Leaflet (or just Map) components like Paths, Markers, etc requires me to directly render them inside the map, so the context is available (Marker calls Map instance on the mount, etc).

However, this becomes not maintainable code, since my map is huge with a lot of conditionally rendered children (if route A then renders component X and Y).

I want to achieve a way to render children in proper places related to their domains (map is just a container I inject into). But they require context. I was trying to figure it out with Portals, but it doesn't work since React renders children outside context and just projects rendered DOM inside.

So I need something like this: portal component, which is mounted inside Map all the time and somehow gets all the context it can access and somehow injects it into the projected component.

Of course, it doesn't have to be the react portal, but I want API to look like this:

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

and it will construct a tree like this:

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

How to achieve this?

I thought about my own context but I can't serialize React component into context value, right?

score 0 · Answer 1 · answered Oct 08 '20 at 15:25

I use react-through for achieving the component teleportation with an SVG abstraction. By using a monotonically increasing numeric id on the agent, a throughArea can sort the components and make sure they are rendered in a deterministic order.

But the context isn't preserved and the context of the destination is what the component sees which isn't ideal.

Pass unknown context to children component

1 Answers1