如何在本机反应中将函数从孩子传递给父母？

Question

I'm new to react native so many things are still new to me. I've been working with a map component and I have a created a custom button to send the user at his/hers current position. When I call this function inside the map.js (child) everything works fine but when I try to pass this function to a button on mapScreen (parent) and I get undefined. If someone could help, how can I call successfully this function from child to parent.

CHILD COMPONENT

 export const mapView = React.createRef();

const Map = ({ animateToMap, ...props }) => {

  const longitudeDelta = 0.022;
  const latitudeDelta = 0.021;

  const [mapRegion, setMapRegion] = useState({
    latitude: 41.328269,
    longitude: 19.817853,
  });

  const getRegionForType = (type) => {
    const regionData = {
      longitude: mapRegion.longitude,
      latitude: mapRegion.latitude,
    };
   
    if (type == 'map') {
      regionData.longitudeDelta = longitudeDelta;
      regionData.latitudeDelta = latitudeDelta;
    }
    return regionData;
  };

  const getMapRegion = () => getRegionForType('map');
  const getMarkerCoords = () => getRegionForType('marker');

  const setRegionForLocation = (location) => {
    let coords = location.coords;
    let longitude = coords.longitude;
    let latitude = coords.latitude;

    if (mapRegion.longitude === longitude && mapRegion.latitude === latitude) return;

    setMapRegion({ longitude, latitude, longitudeDelta, latitudeDelta });
  };

  const loadLocation = () => {
    Location.getForegroundPermissionsAsync() // later it should be changed to getBackgroundPermissionAsync()
      .then((response) => {
        if (response.status !== 'granted') throw 'Permission to access location was denied';

        return Location.getCurrentPositionAsync({});
      })
      .then((location) => {
        if (!location) throw 'Problem  retrieving location';

        setRegionForLocation(location);
      })
      .catch((reason) => {
        console.log('Load location is not working efficently', reason);
      });
  };

//This is the function I want to call in the parent
  animateToMap = () => {
    mapView.current.animateToRegion(
      {
        latitude: mapRegion.latitude,
        longitude: mapRegion.longitude,
        longitudeDelta: 0.022,
        latitudeDelta: 0.021,
      },
      1000,
      console.log('Sucessfull animation'),
    );
  };

  useEffect(() => {
    loadLocation();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {mapRegion ? (
        <MapView
          provider={PROVIDER_GOOGLE}
          ref={mapView}
          initialRegion={getMapRegion()}
          region={getMapRegion()}
          style={styles.map}
          mapType={props.mapType}
        >
          {mapRegion != null && (
            <Marker coordinate={getMarkerCoords()}>
              <Entypo name="location-pin" size={60} color="purple" />
            </Marker>
          )}
        </MapView>
      ) : (
        <ActivityIndicator />
      )}
    </View>
  );
};

export default Map;

PARENT

 const animateToMap= useRef();

  console.log('location: ', animateToMap); // Here I see that is undefined

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <MapLook>
        <Map mapType={changeMapView} animateToMap={animateToMap} />

          <LocationView>
            <LocationBtn>
              <MaterialIcons
                name="my-location"
                size={30}
                color="purple"
                style={{ alignSelf: 'center', marginTop: 14 }}
                onPress={animateToMap.current} //This doesn't work at all
              />

            </LocationBtn>
          </LocationView>
       
      </MapLook>
    </SafeAreaView>
  );
};

export default MapScreen;

Answer 1

You can't. But you can pass the function to child component as prop and update parent state or etc like this simple example:

 function Parent() { const [name,setName]=React.useState(); return <div> <Child onChangeName={v=>setName(v)}/> Name filling in child component is: {name} </div> } function Child({onChangeName}) { const nameRef=React.useRef(); return <div> <input type="text" ref={nameRef}/> <button onClick={()=>onChangeName(nameRef.current.value && nameRef.current.value)}>Set Name</button> </div> } ReactDOM.render(<Parent/>,document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

You can simply use optional chaining operator too: instead of nameRef.current.value && nameRef.current.value can write : nameRef.current?.value