Блог

новое в react, так что это, вероятно, очень очевидно, но у меня есть функция, которая вычисляет расстояние между пользователем и широтой, 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 или props в render?

Спасибо

Создайте prop с именем что-то вроде 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)/>)
}
  

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