React中父页面组件如何获取子Map组件的标记位置状态

你遇到的是React单向数据流场景下典型的子组件状态需要被父组件访问的问题，优先用状态提升的方案实现，完全符合React设计规范，没有额外依赖，维护成本最低。

实现逻辑 #

React默认是单向数据流，子组件内部的私有状态父组件无法直接访问，当多个组件需要共用同一份状态时，要把状态上移到所有使用组件的最近共同父组件中维护，再通过props把状态值、修改方法下发给子组件使用。
你的场景里userPickPos既需要在Map组件里用来渲染选点标记，又需要在All父组件里做业务逻辑，共同父级就是All组件，直接把状态移到All里维护即可。

具体代码修改 #

1. 调整All父组件 #

把原Map组件内的userPickPos状态移到All中定义，同时把状态值、状态更新方法通过props传给Map组件：

const All = () => {
    // 上移后的选点状态，父组件内可直接访问、使用
    const [userPickPos, setUserPickPos] = useState()

    // 这里可以直接写依赖userPickPos的业务逻辑，比如提交选点、做位置计算等
    // 注意React状态更新是异步批处理，要拿最新值建议用useEffect监听
    useEffect(() => {
      console.log('用户最新选择的坐标：', userPickPos)
    }, [userPickPos])

    return (
        {/* 把状态和更新方法透传给Map子组件 */}
        <Map 
          userPickPos={userPickPos}
          onPickPosChange={setUserPickPos}
        />
    )
}

2. 调整Map子组件 #

删除本地的userPickPos状态定义，从props中接收父组件传入的状态值和更新方法，地图点击选点时调用传入的更新方法同步状态到父组件：

// 接收父组件传入的props
const Map = ({ userPickPos, onPickPosChange }) => {
  const MapEvents = () => {
    useMapEvents({
      click(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;
        const newPos = { lat, lng }
        // 选点后调用父组件方法更新全局状态
        onPickPosChange(newPos)
      },
    });
  }

  const bounds = new LatLngBounds([81.505, -0.09], [50.773941, -84.12544])

  return (
    <>
      <Head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
        crossorigin=""></script>
      </Head>

      <MapContainer 
        className='absolute h-screen w-[1500px] left-[520px] top-[56px] bg-no-repeat bg-cover bg-[#738aaf]'
        center={[71.505, -40.09]} zoom={3} scrollWheelZoom={true} noWrap={true}>
        <ImageOverlay
          url="/allmaphres.png"
          bounds={bounds}
          opacity={1}
          zIndex={10}
        />
        {/* 直接用props传入的userPickPos渲染标记，和之前本地存状态的效果完全一致 */}
        {userPickPos && 
          <Marker position={userPickPos}>
            <Popup>
              Your Pick.
            </Popup>
          </Marker>
        }
        <MapEvents />
      </MapContainer>
    </>
  );
}

补充说明 #

• 不建议用forwardRef+useImperativeHandle的方式把内部状态抛给父组件，这种方式会打破React单向数据流的约定，只适合在封装第三方无法修改源码的组件时应急使用，自己写的业务组件优先用状态提升。
• 如果后续userPickPos需要在更多跨多层的组件中使用，再考虑引入Context或者全局状态管理库即可，当前父子两层的场景状态提升是最轻量的方案。

内容的提问来源于stack exchange，提问作者Jaydendev