javascript - 从 react 传单中的 map 中删除缩放控件

Question

我正在构建一个 react-leaflet 应用程序，我试图将缩放控件与 map 本身分开。此处询问了 Vanilla Leaflet 上下文中的相同问题:Placing controls outside map container with Leaflet? .这就是我试图在 react-leaflet 框架内完成的工作。这是我的项目的概要:

import UIWindow from './UIWindow'
import Map from './MapRL'

class App extends React.Component {
   render () {
      return (
         <div className="App">
            <Map />
            <UIWindow />
         </div>
      )
   }
}

export default App;

我的 map 组件如下所示:

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: Cannot read property '_zoom' of undefined，以及一些更详细的错误说明，以及所有引用资料Leaflet 关于缩放功能的内部代码。( DomUtil.removeClass(this._zoomInButton, className); 等)

我预计会出现错误，因为 ZoomControl 不再是 <Map /> 的子项组件，而是 <Map /> 的孙子的 sibling 。我知道 react-leaflet 在其上下文提供者和消费者 LeafletProvider 和 LeafletConsumer 上的功能。当我尝试从我的 <ControlLayer /> 中调用我的 LeafletConsumer 时，我什么也得不到。例如:

            <LeafletConsumer>
               {context => console.log(context)}
            </LeafletConsumer>

这会记录一个空对象。很明显，我的 ControlLayer 中的 LeafletConsumer 没有正确地连接到我的 <Map /> 中的 LeaflerProvider 中。 .我是否需要使用 LeafletProvider 以某种方式从 Map 导出上下文？我对 React Context API 有点陌生，所以这对我来说还不是很直观。 (应用程序的其余大部分将使用 React Redux 来管理组件之间的状态更改和通信。这就是我计划将侧边栏的内容连接到 map 本身的方式。我的侧边栏似乎没有任何问题与 <Map /> 完全断开)。

如何正确地将此 ZoomControl 连接到我的 map 组件？

更新:

我尝试在我的 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 函数捕获的上下文。

仍然，这不起作用。我的 React 开发工具显示 MapContent.Consumer 给出的值与当 ZoomControl 位于 Map 组件内时 react-leaflet 的固有 '' 给出的值完全相同。但我仍然收到相同的错误消息。在这里非常沮丧。

Answer 1

这里是没有钩子(Hook)的相同方法:

Provider 应该是这样的:

class Provider extends Component {
  state = { map: null };

  setMap = map => {
    this.setState({ map });
  };

  render() {
    return (
      <Context.Provider value={{ map: this.state.map, setMap: this.setMap }}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

传单组件将是:

class Leaflet extends Component {
  mapRef = createRef(null);

  componentDidMount() {
    const map = this.mapRef.current.leafletElement;
    this.props.setMap(map);
  }

  render() {
    return (
      <Map
        style={{ width: "80vw", height: "60vh" }}
        ref={this.mapRef}
        center={[50.63, 13.047]}
        zoom={13}
        zoomControl={false}
        minZoom={3}
        maxZoom={18}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?"
        />
      </Map>
    );
  }
}

现在要访问 compoenntDidMount 的 setMap 函数，您需要执行以下操作:

export default props => (
  <Context.Consumer>
    {({ setMap }) => <Leaflet {...props} setMap={setMap} />}
  </Context.Consumer>
);

其余的请看这里:Demo