У меня есть внешний компонент (Leaflet Map). Этот компонент имеет много детей. Приложение рисует разные вещи на карте в зависимости от состояния, маршрутов и т. Д.
Использование компонентов Leaflet (или просто Map), таких как Paths, Markers и т. Д., Требует, чтобы я непосредственно отображал их внутри карты, поэтому контекст доступен (Marker вызывает экземпляр Map при монтировании и т. Д.).
Однако это становится не поддерживаемым кодом, так как моя карта огромна с большим количеством условно визуализированных дочерних элементов (если маршрут A затем отображает компоненты X и Y).
Я хочу найти способ визуализации детей в нужных местах, связанных с их доменами (карта - это просто контейнер, в который я добавляю). Но они требуют контекста.
Я пытался выяснить это с помощью порталов, но это не работает, поскольку React отображает дочерние элементы вне контекста и просто проекты отображают DOM внутри.
Так что мне нужно что-то вроде этого: компонент портала, который все время монтируется внутри Map, и каким-то образом получает весь контекст, к которому он может получить доступ, и каким-то образом внедряет его в проектируемый компонент. ,
Конечно, это не обязательно должен быть реактивный портал , но я хочу, чтобы API выглядел следующим образом:
<SomeDomainComponent>
<MapPortal>
<Marker position={[50, 20]} />
</MapPortal>
</SomeDomainComponent>
и дерево будет построено так:
<LeafletMap>
<Marker position={[50, 20]} />
</LeafletMap>
Как этого добиться?
Я думал о своем собственном контексте, но не могу сериализовать компонент React в значение контекста, верно?