Реакция: Как передать возвращенное значение функции родительскому компоненту?

Question

новый, чтобы реагировать, так что это, вероятно, очень очевидно, но у меня есть функция, которая вычисляет расстояние между пользователем и широтой, lng компонента (из состояния), а затем возвращает значение с помощью returnDistance().

export default class Space extends React.Component {
    render() {
        const userLat = this.props.userLat,
        userLng = this.props.userLng;

        let lat = this.props.node.latitude,
            lng = this.props.node.longitude;

        function getDistance(lat1, lon1, lat2, lon2) {
            var R = 6371; // km
            var dLat = toRad(lat2 - lat1);
            var dLon = toRad(lon2 - lon1);
            var lat1 = toRad(lat1);
            var lat2 = toRad(lat2);

            var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            var d = R * c;
            return d;
        }

        // Converts numeric degrees to radians
        function toRad(Value) {
            return Value * Math.PI / 180;
        }

        function returnDistance() {
            return getDistance(userLat, userLng, lat, lng).toFixed(1);
        }

        return (
            <Component>
                {userLat ?
                <ComponentDistance>
                    {returnDistance()}
                    <span>km</span>
                </ComponentDistance>
                : null }
            </Component>
        )
    }
}

Как передать значение returnDistance() родительскому компоненту, когда я не могу установить setState или пропустить в render?

спасибо

Answer 1

Сделайте так, чтобы реквизит назывался что-то вроде onCalculateDistance, и в ребенке сделайте это:

function returnDistance() {
        const dist = getDistance(userLat, userLng, lat, lng).toFixed(1);
        this.props.onCalculateDistance(dist);
        return dist;
    }

А потом в родительском вы можете сделать это:

distanceChange(dist) {
       // whatever you want, for example
     this.setState({dist});
}

render() {
  return (<Space onCalculateDistance=(this.distanceChange)/>)
}

Answer 2

Обычно вы сохраняете функцию returnDistance() в родительском компоненте, если вам нужен доступ к ее результату.Затем вы передаете его в реквизит компонента, в который он будет вызван.