最新版本的 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();

演示