Я создаю приложение-буклет, и я пытаюсь отделить элемент управления масштабированием от самой карты. Тот же вопрос в контексте ванильного Leaflet был задан здесь: Размещение элементов управления вне карты контейнер с листовкой?. Это то, что я пытаюсь достичь в рамках системы response-листовок. Вот общий план моего проекта:
import UIWindow from './UIWindow'
import Map from './MapRL'
class App extends React.Component {
render () {
return (
<div className="App">
<Map />
<UIWindow />
</div>
)
}
}
export default App;
Мой компонент карты выглядит так:
import React from 'react'
import { Map as LeafletMap, TileLayer } from 'react-leaflet'
class Map extends React.Component {
render () {
return(
<LeafletMap
className="sidebar-map"
center={...}
zoom={...}
zoomControl={false}
id="mapId" >
<TileLayer
url="..."
attribution="...
/>
</LeafletMap>
)
}
}
export default Map;
Тогда мой UIWindow выглядит так:
class UIWindow extends React.Component {
render () {
return(
<div className="UIWindow">
<Header />
<ControlLayer />
</div>
)
}
}
И, наконец, мой ControlLayer (где я хочу, чтобы мой ZoomControl жил) должен выглядеть примерно так:
class ControlLayer extends React.Component {
render () {
return (
<div className="ControlLayer">
<LeftSidebar />
<ZoomControl />
{this.props.infoPage && <InfoPage />}
</div>
)
}
}
Конечно, с этим текущим кодом размещение ZoomControl в ControlLayer вызывает ошибку: TypeError: невозможно прочитать свойство _zoom из undefined, с более подробным описанием того, что не так, со всеми ссылками на внутренний лист Leaflet. код, касающийся функции масштабирования. (DomUtil.removeClass(this._zoomInButton, className); и т. Д.)
Я ожидал ошибки, потому что ZoomControl больше не является дочерним элементом компонента <Map />, а скорее является внуком брата или сестры <Map />. Я знаю функции response-leaflet по его поставщику контекста и потребителю, LeafletProvider и LeafletConsumer. Когда я пытаюсь вызвать LeafletConsumer из своего <ControlLayer />, я ничего не получаю. Например:
<LeafletConsumer>
{context => console.log(context)}
</LeafletConsumer>
Это регистрирует пустой объект. Ясно, что мой LeafletConsumer из моего ControlLayer неправильно подключен к LeaflerProvider из моего <Map />. Нужно ли мне каким-то образом экспортировать контекст с карты с помощью LeafletProvider? Я немного новичок в React Context API, поэтому мне это пока не интуитивно понятно. (Большая часть остальной части приложения будет использовать React Redux для управления изменениями состояния и обмена данными между компонентами. Именно так я планирую подключить содержимое боковой панели к самой карте. У моей боковой панели нет никаких проблем при полном отключении от <Map />).
Как я могу правильно подключить этот ZoomControl к моему компоненту карты?
ОБНОВЛЕНИЕ:
Я попытался захватить контекст в моем хранилище redux, а затем передать его своему внешнему ZoomControl. Вот так:
<LeafletConsumer>
{ context => {
this.props.captureContext(context)
}}
</LeafletConsumer>
Это захватывает контекст как часть моего хранилища redux. Затем я использую это как значение в новом контексте:
// ControlLayer.js
const MapContext = React.createContext()
<MapContext.Provider value={this.props.mapContext}>
<LeftSidebar />
<MapContext.Consumer>
{context => {
if (context){
console.log(ZoomControl);
}
}}
</MapContext.Consumer>
</MapContext.Provider>
Где this.props.mapContext взят из моего redux matchStateToProps, и это точно контекст, захваченный функцией captureContext.
Тем не менее, это не работает. Мои инструменты для разработки реакции показывают, что MapContent.Consumer дает те же значения, что и «присущий» response-листовки, когда ZoomControl находится внутри компонента Map. Но я все равно получаю то же сообщение об ошибке. Здесь очень расстроен.
