反应传单标记器不起作用

Question

我正在尝试使用react-leaflet-markercluster，但在向代码中添加<MarkerClusterGroup>之后，控制台中会显示错误，页面不会加载。如果不添加此组件，一切都将正常工作。

也许问题在于版本冲突，但是我试图回滚react-leaflet的版本，但是在安装react-leaflet@3.2.1时也会发生冲突。因此，我决定集中精力处理实际版本。

App.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

@akhtem也许可以试试这个？https://www.npmjs.com/package/@changey/react-leaflet-markercluster。此链接解决了react 18和传单v4兼容性问题。我让它开始工作了。希望能帮上忙，谢谢

Answer 2

您的ContainerComponent组件使用"useLeafletContext“，它只能在MapContainer ContainerComponent MapContainer等子组件中使用。