Javascript 从react传单中的地图中删除缩放控件

我正在构建react传单应用程序，并尝试将缩放控件与地图本身分离。在普通传单的背景下，这里也提出了同样的问题：。这就是我试图在react传单框架内实现的目标。以下是我的项目概述：

从“/UIWindow”导入UIWindow
从“/MapRL”导入地图
类应用程序扩展了React.Component{
渲染（）{
返回(
)
}
}
导出默认应用程序；

我的地图组件如下所示：

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>
    );
  }
}

从“React”导入React
从“react-传单”导入{Map as-传单映射，TileLayer}
类映射扩展了React.Component{
渲染（）{
返回(
我不知道如何使用您的方法实现这一点，当您尝试将react传单的包装ZoomControl放置在地图包装外时，它不是地图包装的子项

但是，对于ZoomControl这样的小控件，一个简单的解决方案是创建一个与原始控件相同的自定义缩放组件，使用本机css样式轻松地构建它，并在访问map元素后，分别调用放大和缩小方法

在下面的示例中，我使用react context在地图加载后保存地图元素：

useEffect(() => {
    const map = mapRef.current.leafletElement;
    setMap(map);
  }, [mapRef, setMap]);

然后在这里使用映射引用使自定义缩放组件与本机组件相同（有关css，请参阅演示）：

const Zoom=（）=>{
const{map}=useContext（上下文）；
常数zoomIn=e=>{
e、 预防默认值（）；
map.setZoom（map.getZoom（）+1）；
};
常数zoomOut=e=>{
e、 预防默认值（）；
map.setZoom（map.getZoom（）-1）；
};
返回(
);
};

然后把它放在你喜欢的任何地方：

const App = () => {
  return (
    <Provider>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <Leaflet />
        <Zoom />
      </div>
    </Provider>
  );
};

const-App=（）=>{
返回(
);
};

这里是没有挂钩的相同方法：

提供程序应如下所示：

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>
    );
  }
}

类提供程序扩展组件{
状态={map:null}；
setMap=map=>{
this.setState（{map}）；
};
render（）{
返回(
{this.props.children}
);
}
}

传单部分将包括：

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>
    );
  }
}

类传单扩展组件{
mapRef=createRef（null）；
componentDidMount（）{
const map=this.mapRef.current.element；
this.props.setMap（map）；
}
render（）{
返回(
);
}
}

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

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

导出默认道具=>(
{（{setMap}）=>}
);

其余的请看这里：
这是我100%想要的，谢谢你的深思熟虑的回答。我越是研究你的解决方案，我就越意识到我没有完全理解它。部分原因是因为我刚刚在学习挂钩。你介意解释一下
const{setMap}=useContext（Context）
（lapper.jsx中的第10行）？
setMap
函数是如何成为上下文对象的一部分的？我也不太了解您的
useffect
钩子是如何与您的
const-mapRef=useRef（null）
行交互的。您的解决方案可以在没有钩子的情况下编写吗？（我知道这是一项艰巨的任务，我感谢你在回答问题时所付出的努力）
setMap（map）；
是一个函数，当组件使用上下文api加载时，它会用map实例更新map上下文。
mapRef
用于保存对map的引用，因此在加载传单组件时使用并更新。我提供了另一个答案，但没有使用挂钩。如果它有助于您感谢taki现在是写这篇文章的时候了。这对我来说更直观（至少在我还在学习钩子的时候）。从我收集的信息来看，您正在使用
this.props.setMap（map）
组件中的
来设置提供程序的状态，以保存对映射实例的引用。然后提供程序将该引用传递给任何使用者…对吗？