React + leaflet + 路由機器：在 MapContainer 外部訪問 map 時出現問題

Question

我的項目有問題，我想在我的 map 上繪制路線並添加標記，但事件是在 sidenav 外部觸發的，如何收集標記的經緯度。 我無法在外面撥打我的 map，因為我收到以下消息：

useLeafletContext() 只能用於的后代

項目架構：應用程序

• 應用程序
  • 側邊欄
  • Map
    • 地圖容器
      • RoutingAdd（我需要創建路線的地方）

路由.js

export default function RoutingAdd(props) {
const map = useMap();
//const dispatch = useDispatch();
const wayponts = useSelector((state) => state.startingPoints.value);
useEffect(() => {
    if (!map) return;
    console.log(wayponts);
    const routingControl = L.Routing.control({
        waypoints: [
            L.latLng(wayponts.start.lat, wayponts.start.long),
            L.latLng(wayponts.start.lat, wayponts.start.long)
        ],
        routeWhileDragging: true
    }).addTo(map);

    return () => map.removeControl(routingControl);
}, [map]);

return null;

}

Map.js

function Map(props) {
const position = [48.856614, 2.3522219]
return (
    <MapContainer style={{ width: "100%", height: "100vh", zIndex: 0 }}  center={position} zoom={13} >
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <BornesCluster />
        <RoutingAdd addStart={props.handleNewStart} addEnd={props.handleNewEnd}></RoutingAdd>
    </MapContainer>
);

} 導出默認值 Map；

邊欄.js

function IntputNavigtion() {
    const dispatch = useDispatch();
    const map = useMap();
    function handleStartPoint(event) {
        console.log(event);
        //map.panTo(new LatLng(event.value[0], event.value[1], 0));
        dispatch(createStart({start:{lat: event.value[0], long: event.value[1]}}));
    }
    return (
        <div>
            <form>
                <select className="form-select" aria-label="Default select example">
                    <option selected>Choisir un modèle de voiture</option>
                    <option value="1">Telsa Model 3</option>
                    <option value="2">Zoe</option>
                </select>
                <hr />
                <InputAddresseGeocode
                    label="Point de départ"
                    placeholder="Entrer un point de départ"
                    valueSelectedCall={handleStartPoint}
                ></InputAddresseGeocode>
                <InputAddresseGeocode label="Point d'arrivé" placeholder="Entrer une addresse d'arrivé"></InputAddresseGeocode>
            </form>

            <button className="btn btn-primary mt-2">
                Calculer
            </button>
        </div>
    );
}

function SideBar() {

    const [toggled, setToggled] = useState('toggled');
    function toggleSideBar() {
        if(toggled == 'toggled') setToggled('hide')
        else setToggled('toggled')
    }

    function handleStartUpdate() {

    }

    function handleEndUpdate() {

    }

    return (
        <main>
            <button className={'btn btn-primary button-toggle button-toggle-' + toggled} onClick={toggleSideBar}><i className="fa fa-solid fa-bars"></i></button>
            <div id="wrapper" className={'d-flex flex-column flex-shrink-0 p-3 bg-light ' + toggled} style={{width: '360px', position: 'fixed', zIndex: '1',
                height: '100%', right: '0', top: '0'}}>
                <a href="/" className="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
                    <span className="fs-4">Navigation</span>
                </a>
                <hr />
                <IntputNavigtion />
            </div>
        </main>
    );
}

export default SideBar;

如果有人有想法在這兩個組件之間進行通信或重新考慮如何創建路由，謝謝

Answer 1

您可以使用useMap()的唯一方法是在<MapContainer>內部。 但是，您可以從內部向外部傳遞對 map 的ref 。 由於您的組件確實是嵌套的，因此您必須將它從一個組件傳遞到另一個組件，這不是很好，並且您可以通過創建一個新的 Context 或使用全局 state 管理器（如zustand或redux ）來避免這樣做。 但是，我會告訴您執行此操作的快速而骯臟的方法。

在 App.js 中

import { useRef } from "react"
function App(props) {
const mapRef = useRef();

return (
  <div>
   ...
   <Sidebar mapRef={mapRef}/>
   <Map mapRef={mapRef}/>
   ...
  </div>
)
}

在 Map.js

...
<RoutingAdd mapRef={props.mapRef} addStart={props.handleNewStart} addEnd={props.handleNewEnd}/>
...

在 Routing.js 中

export default function RoutingAdd(props) {
const map = useMap();
props.mapRef.current = map;
...

在 Sidebar.js 中

function SideBar(props) {
  const map = props.mapRef.current
...