如何使用 React Leaflet 使用不是 <MapContainer> 子组件的按钮访问传单功能？

Question

我有一个基本的 React 应用程序，用户可以单击

<Marker>

，地图将缩放到所选标记，这将按预期工作：

   function MyMap() {

     <MapContainer className="map"
       center = {[40, 10]}
       zoom = {10}
       zoomControl = {false}
       >
       <Markers>

         const map = useMap();

         loc.map(loc => {
           return (
             <Marker
               key={loc.properties.id} 
               position={[loc.properties.y, loc.properties.x]}
               eventHandlers={{
                 click: () => {
                   map.setView([loc.properties.y, loc.properties.x], 16)
                 }
               }}>
             </Marker>
           )
         })
       </Markers>
     </MapContainer>
    }

现在我想做的是复制

map.setView()

功能以在按钮单击上工作。该按钮位于地图旁边的侧面板中，并且不是

<MapContainer>

的子按钮。每个

<Marker>

在侧面板上都有一个相应的按钮。

主要应用程序代码如下所示：

function App() {
  <SidePanel>
    <Button />
  </SidePanel>
  <MyMap />
}

有没有一种方法可以轻松地从

map.setView()

事件处理程序访问

<Marker>

函数并在侧面板中的

<Button>

上使用它？

Answer 1

您可能只想在按钮组件中创建一个函数，然后将该函数向下传递到定义映射变量的位置，然后在子组件的主体中调用该函数，而不是尝试访问事件处理程序，你可以调用map()函数。

Answer 2

如果您可以在 MapContainer 外部访问您的位置，则 MapContainer 上有一个名为 whenCreated 的道具，它返回地图。 您可以在 MapContainer 之外使用它。

const [map, setMap] = useState(null);
const loc = [];

<MapContainer whenCreated={setMap}>
  <Markers locations={loc} />
</MapContainer>
<SidePanel>
  {loc.map((loc, index) => {/* Render button and add use map saved in state to attach click handler */})}
</SidePanel>

Answer 3

从最新版本的react-leaflet（我相信是4.0+）开始，我们可以使用

ref

代替

whenCreated

，即：

const ParentComponent = () => {
  const [map, setMap] = useState(null)

  return (
    <MapContainer
      ref={setMap}
    />
    ...
    </MapContainer>
  )
}

我们可以使用

map

以及其他所有相关功能。