反应传单标记集群不工作

Question

我正在尝试使用react-leaflet-markercluster，但添加<MarkerClusterGroup>到代码后，控制台中会显示错误，并且页面不会加载。如果不添加这个组件，一切都会正常。

也许问题出在版本冲突上，但我尝试回滚 的版本react-leaflet，但react-leaflet@3.2.1与其余软件包安装时也会发生冲突。因此，我决定专注于实际版本。

应用程序.js

import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/dist/styles.min.css'

const App = () => {
  return (
    <div className="container">
      <MapContainer className="map-container" center={[49.8397, 24.0297]} zoom={6}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />        
        <MarkerClusterGroup>
          <Marker position={[49.8397, 24.0297]} />
          <Marker position={[52.2297, 21.0122]} />
          <Marker position={[51.5074, -0.0901]} />
        </MarkerClusterGroup>
      </MapContainer>
    </div>
  )
}

export default App

错误：

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
    at useLeafletContext (context.js:9:1)
    at usePath (path.js:18:1)
    at ContainerComponent (component.js:6:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at updateForwardRef (react-dom.development.js:19968:1)
    at beginWork (react-dom.development.js:22391:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
    at invokeGuardedCallback (react-dom.development.js:4270:1)
    at beginWork$1 (react-dom.development.js:27243:1)

package.json 依赖项：

"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"leaflet": "^1.8.0",
"leaflet.markercluster": "^1.5.3",
"react-leaflet": "^4.0.0",
"react-leaflet-markercluster": "^3.0.0-rc1"

Answer 1

您的 ContainerComponent 组件使用“useLeafletContext”，它只能在 的子组件中使用，例如 MapContainer ContainerComponent MapContainer