React中如何将Map组件内的函数绑定到RetailLocations组件的按钮上

AI 小北

2026-9-30

实现步骤

你需要通过React的forwardRef + useImperativeHandle API将子组件内部方法暴露给父组件调用，具体操作如下：

第一步：改造Map组件，引入依赖后对外暴露handleClick方法

import { useState, useRef, forwardRef, useImperativeHandle } from 'react';
// 其余原有引入保持不变

const Map = forwardRef((props, ref) => {
    const [center, setCenter] = useState({ lat: 0, lng: 0 });
    const location = useGeoLocation();
    const mapRef = useRef();
    
    const ZOOM_LEVEL = 20;

    const handleClick = (e) => {
        if (location.loaded) {
            mapRef.current.leafletElement.flyTo(
                [location.coordinates.lat, location.coordinates.lng],
                ZOOM_LEVEL,
                { animate: true }
            );  
        } 
    };

    // 对外暴露自定义方法
    useImperativeHandle(ref, () => ({
        handleClick
    }));

    return <>
        <MapContainer
            center={center}
            zoom={ZOOM_LEVEL}
            ref={mapRef}
            scrollWheelZoom={false}
            className={style.mapContainer}
        >
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            />
            {location.loaded && (
                <Marker position={[ location.coordinates.lat, location.coordinates.lng ]}></Marker>
            )}
        </MapContainer>
    </>;
});

export default Map;

第二步：改造RetailLocations父组件，创建ref绑定Map组件后在按钮点击事件中调用暴露的方法

import { useRef } from 'react';
import Map from './Map';
// 其余原有引入保持不变

// 组件内部逻辑
const mapRef = useRef(null);

// 按钮绑定点击事件
<button
    className={style.locationBtn}
    onClick={() => mapRef.current?.handleClick()}
>My Location</button>

// 给Map组件绑定创建好的ref
<Map ref={mapRef} />