Реакт и листок

Question

Я пытаюсь использовать Листовку в своем приложении React. У меня проблема. Leaflet.js требует, чтобы компонент div существовал при инициализации карты. React не «создает» div до тех пор, пока не отобразит компонент, поэтому листовки бросают ошибку. И getDOMNode(), и findDOMNode() возвращают «не функцию» по какой-либо причине.

Код:

import React from 'react'; 
import {render} from 'react-dom'; 
import L from 'leaflet'; 

... чуть позже

export default class Mapbox extends React.Component { 
    render() { 
    var map = L.map('map').setView([51.505, -0.09], 13); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 

    return (

     <div id="map"> 
    <h1>hi</h1> 
    </div> 
    ); 

Это возвращает ошибку, что "Карта Контейнер не найдена".

Спасибо.

Answer 1

Вы можете инициализировать карту внутри componentDidMount

class Mapbox extends React.Component { 
    componentDidMount() { 
    this.map(); 
    } 

    map() { 
    var map = L.map('map').setView([51.505, -0.09], 13); 

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map); 
    } 

    render() { 
    return <div id="map">xx</div> 
    } 
} 

Example

Answer 2

использования "рефов". Refs используется для возврата ссылки на элемент. docs here

class Map extends React.Component { 

    componentDidMount() { 
    const node = this.node; 
    var map = var map = L.map(node).setView([51.505, -0.09], 13); 
    } 

    render() { 
    return <div ref={(node) => { this.node = node }}></div> 
    } 
}