Как написать компонент без состояния и без вывода в React? - PullRequest
0 голосов
/ 09 сентября 2018

Я новичок, чтобы отреагировать и сейчас создаю транспортное веб-приложение. У меня есть компонент карты (с google maps api), компонент местоположения пользователя и компонент общественного транспорта. Также я написал родительский компонент, который должен управлять состоянием всех трех и вызывать компонент карты для визуализации.

Проблема в том, что я не уверен, что делаю это правильно. На самом деле я уверен, что я все испортил, как все должно работать здесь ..

Это мой userLocation Component

import React from 'react'

export class Userocation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userLatlng = {lat: '', lng: ''}
        };
        this.getUsersLocation = this.getUsersLocation.bind(this)
        this.parseUserLocation = this.parseUserLocation.bind(this)
    }

    parseUserLocation(position) {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        var userLocation = { lat: lat, lng: lng }

        this.props.updateUserLocation(userLocation)
    }

    getUsersLocation() {
        navigator.geolocation.getCurrentPosition(this.parseUserLocation)
    }

    render() {
        setInterval(this.getUsersLocation, 5000) // Not rendering anything..
    }
}

родительский компонент менеджера местоположений (я удалил его части, чтобы вы могли увидеть проблему) -

import React from 'react'
import userLocation from './userLocation'
import busStationLocation from './busStaionLocation'

export class Locationmanager extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userLocation: {lat: '', lng: ''},
            loadingUserLocation: true,
        }
    }

    updateUserLocation(newLocation) {
        this.setState({userLocation: newLocation})
    }

    render() {
        <userLocation /> //Rendering a component that doesn't present nothing..
        //calling the map and transport component...
    }
}

вы видите проблему? Я не понимаю, как организовать мои компоненты ..

...