React Native中如何从子组件FetchData向父组件MapScreen回传数据

这问题其实很典型，React里子组件向父组件传值核心就是用回调函数，我结合你的组件结构给你一步步拆解实现方案：

1. 父组件 MapScreen.js 修改 #

这里我们要做三件事：定义状态存储选中的标记键和对应人员数据、写回调函数接收子组件传回来的标记键、把数据和回调分别传给两个子组件。

import React, { useState, useEffect } from 'react';
import FetchData from './FetchData';
import ShowData from './ShowData';
// 替换成你实际获取人员数据的方法（API/本地数据均可）
import { getPersonDataByKey } from './your-data-service';

const MapScreen = () => {
  // 存储选中的标记key
  const [selectedMarkerKey, setSelectedMarkerKey] = useState(null);
  // 存储对应的人员详情数据
  const [selectedPersonData, setSelectedPersonData] = useState(null);

  // 父组件的回调函数，接收子组件传来的markerKey
  const handleMarkerSelect = (markerKey) => {
    setSelectedMarkerKey(markerKey);
  };

  // 当选中的标记key变化时，自动查询对应人员数据
  useEffect(() => {
    if (selectedMarkerKey) {
      // 调用数据查询方法，拿到对应人员数据
      const personData = getPersonDataByKey(selectedMarkerKey);
      setSelectedPersonData(personData);
    } else {
      // 未选中标记时清空数据
      setSelectedPersonData(null);
    }
  }, [selectedMarkerKey]);

  return (
    <div className="map-screen-container">
      {/* 把回调函数传给FetchData子组件 */}
      <FetchData onMarkerSelect={handleMarkerSelect} />
      {/* 把选中的人员数据传给ShowData子组件 */}
      <ShowData personData={selectedPersonData} />
    </div>
  );
};

export default MapScreen;

2. 子组件 FetchData.js 修改 #

这里只需要接收父组件传过来的回调函数，在标记点击事件里调用它并传递当前标记的key即可：

import React from 'react';
// 这里以react-leaflet为例，如果你用的是React Native Maps写法类似
import { Map, Marker, Popup } from 'react-leaflet';

const FetchData = ({ onMarkerSelect }) => {
  // 替换成你实际的标记数据
  const markers = [
    { key: 'marker_01', position: [51.505, -0.09], name: '张三' },
    { key: 'marker_02', position: [51.51, -0.1], name: '李四' },
    // ...更多标记数据
  ];

  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      {markers.map(marker => (
        <Marker 
          key={marker.key} 
          position={marker.position}
          // 点击标记时调用父组件的回调，传递当前marker的key
          onClick={() => onMarkerSelect(marker.key)}
        >
          <Popup>{marker.name}</Popup>
        </Marker>
      ))}
    </Map>
  );
};

export default FetchData;

如果是React Native场景，仅需把onClick换成onPress即可，逻辑完全一致：

// React Native中Marker的点击事件写法
<Marker
  key={marker.key}
  coordinate={marker.coordinate}
  onPress={() => onMarkerSelect(marker.key)}
>
  {/* 标记图标或内容 */}
</Marker>

3. 子组件 ShowData.js 修改 #

接收父组件传过来的人员数据，根据有无数据渲染对应内容：

import React from 'react';

const ShowData = ({ personData }) => {
  if (!personData) {
    return <div>请点击地图上的标记查看人员信息</div>;
  }

  return (
    <div className="person-info-card">
      <h3>{personData.name}</h3>
      <p>邮箱：{personData.email}</p>
      <p>电话：{personData.phone}</p>
      {/* 按需渲染更多人员信息字段 */}
    </div>
  );
};

export default ShowData;

1. 父组件通过props传递回调函数给子组件FetchData；
2. 子组件触发标记点击事件时，调用回调函数并把markerkey作为参数传回父组件；
3. 父组件拿到markerkey后，查询对应人员数据，再把数据传给ShowData组件渲染；
4. 整个流程是单向数据流，符合React的设计理念。

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