Mapbox в React без компонентов класса - PullRequest
Новая
       8

Mapbox в React без компонентов класса

0 голосов
/ 18 февраля 2019

Я пытаюсь использовать MapBox-GL с React.Я пытаюсь избежать использования обертки.

Я успешно создал карту, используя Компоненты Класса, но хочу преобразовать ее в использование только функций, чтобы использовать преимущества ловушек.Отображение карты в функции прекрасно работает: 

const map = () => {
    new mapboxgl.Map({
    container: 'mapContainer',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [7.32, 60.44],
    zoom: 6,
    })
};
const Map = () => {
    const style = {
        position: 'absolute',
        top: 0,
        bottom: 0,
        width: '100%',
        height: '100vh'
    };
    useEffect(()=>{
        map();

    });


    return (
        <Row type="flex" gutter="50">
            <Col xs={{ span: 18 }}>
                <div style={style} id="mapContainer" />
            </Col>
        </Row>
    );
}

Однако я хочу добавить контроллеры и работать с картой.Я делаю это обычно в ComponentDidMount ().

Я попытался добавить map.addControl(geocoder);, например, к useEffect, а также вне функции Map.Я получаю только ошибки:

Ошибка типа: map.addControl не является функцией

1 Ответ

0 голосов
/ 18 февраля 2019

Аналогом componentDidMount является useEffect с нулевыми входами.

map.addControl(geocoder) предполагает, что map является экземпляром Map, хотя это функция и она не возвращает значение.

Должно быть: 

const getMap = () => {
    return new mapboxgl.Map({ ... })
};

const Map = () => {
    useEffect(()=>{
        const map = getMap();
        map.addControl(geocoder);
    }, []);
    ...
};
...