最新版本的 ReactJS 和 LeafLet.Shapefile 不工作，只显示空白页

Question

我目前正在研究 ReactJS GIS 并参考此示例Demo 。 但是当我更新最新版本的 React 并且依赖项不起作用时，控制台上没有显示错误消息。 有什么不对。 我也在本地计算机上进行了测试，结果相同（不起作用）会发生什么？

演示：

更新依赖项后：

Answer 1

有很多东西已经改变：

1. React 已更改为 18.x。 您应该在 index.js 中替换所有代码

   import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <App /> );

2. react-leaflet 已移至具有重大更改的 4.x 版本：

map ref 是通过 ref 和 useState 钩子接收的，不需要map.current或map.current.leafletElement 。 Map comp 也已重命名为MapContainer

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

  useEffect(() => {
    if (!map) return;

    map.setView([34.74161249883172, 18.6328125], 2);
  }, [map]);

<MapContainer
      center={position}
      zoom={13}
      style={{ height: "100vh" }}
      ref={setMap}
    >

3. MapContainer 的子组件中的 mapRef 是通过

   const map = useMap();

演示