Javascript 如何从函数组件到类组件（App.js）获取值？

我有两个组件，父组件App.js是类组件，子组件Demo.js是函数组件，我需要将经度和纬度值从Demo.js传递到App.js。怎么做

供参考的文件如下： 1.Demo.js

import React from 'react';
import PropTypes from 'prop-types';
import {usePosition} from '../components/usePosition';

const Demo = () => {
  // I want to pass these values in App.js (class component)
  const {latitude,longitude} = usePosition();

  console.log('Lat', latitude);
  console.log('Lon', longitude);
  return (
    <>
      {!latitude &&  <><div>Trying to fetch location...</div><br/></>}
      <code>
        latitude: {latitude}<br/>
        longitude: {longitude}<br/>
      </code>
    </>
  );
};

export default Demo

非常感谢您的任何建议。。。提前谢谢

对。使用回调作为道具

---

你能在沙盒中提供代码吗？或者如果在单独的文件中使用usePosition，那么您可以直接在App.js中使用我想如果您不介意的话，我可以在这里显示usePosition的代码吗？唯一的事情是您将函数从父级传递到子级，并从父级访问。好的，请提及代码。usePosition的代码是我可以在App.js的componentDidMount中获得这些值，因为我想在屏幕上加载？我不认为这是可能的。您可以在ComponentDidupDate中访问它。但我强烈建议使用useEffect挂钩，而不是componentDidMount或ComponentDidUpdate。将你的App.js转换为功能组件。因此，你可以制作App.js功能组件，并直接在其中使用usePosition钩子。将App.js转换为功能组件是一项有点繁琐的工作……嗯，我不这么认为，最近我将我的整个网站从类转换为功能组件，只需花几分钟的时间来制作一个组件：

import {useState, useEffect} from 'react';

const defaultSettings = {
  enableHighAccuracy: false,
  timeout: Infinity,
  maximumAge: 0,
};

export const usePosition = (watch = false, settings = defaultSettings) => {
  const [position, setPosition] = useState({});
  const [error, setError] = useState(null);

  const onChange = ({coords, timestamp}) => {
    setPosition({
      latitude: coords.latitude,
      longitude: coords.longitude,
      accuracy: coords.accuracy,
      timestamp,
    });
  };

  const onError = (error) => {
    setError(error.message);
  };

  useEffect(() => {
    const geo = navigator.geolocation;
    if (!geo) {
      setError('Geolocation is not supported');
      return;
    }

    let watcher = null;
    if (watch) {
      watcher = geo.watchPosition(onChange, onError, settings);
    } else {
      geo.getCurrentPosition(onChange, onError, settings);
    }

    return () => watcher && geo.clearWatch(watcher);
  }, [settings]);

  return {...position, error};
};

class App extends React.Component {

     gotLatLng = (lat, lng) => {
         console.log('Lat', lat);
         console.log('Lng', lng);
     }

     render(){
        return (
           <Demo passlatLng={this.gotLatLng} />
        )
     }
} 

cost Demo = (props) => {

    const {latitude,longitude} = usePosition();

    useEffect(() => {
        if(latitude && longitude){
            props.passLatLng(latitude, longitude);
        }

    }, [latitude, longitude])   

    return (
        <>
          {!latitude &&  <><div>Trying to fetch location...</div><br/></>}
          <code>
            latitude: {latitude}<br/>
            longitude: {longitude}<br/>
         </code>
       </>
    )
}