Ссылка на экземпляр объекта - React

Question

Я использую реакцию, чтобы отобразить карту буклета. Поскольку я не могу получить экземпляр объекта карты из DOM, как я могу получить экземпляр из компонентов внутри разных маршрутов?

App.js

const Main = React.createClass({ 

    componentDidMount: function() { 
    map = L.map('map', {}).setView([45, 0], min_zoom); 
    let layer = L.tileLayer('https://api....}', { }).addTo(map); 
    }, 

    render() { 
    return (
     <div id='map'> 
     <div id='container'> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
}); 

import Travel from './routes/Travel'; 

render((
    <Router history={history}> 
    <Route path="/" component={Main}> 
     <Route path="/travel/:name" component={Travel}/> 
    </Route> 
    </Router> 
), document.getElementById('app')); 

Маршруты/Travel.js

const Travel = React.createClass({ 

    componentDidMount: function() { 

    GET THE MAP INSTANCE HERE // UNDEFINED 
    }, 


    render() { 
     return (
     <div id='storyBox'> 
     </div> 
    ); 
    }); 

    module.exports = Travel; 

Большое спасибо

Answer 1

Вы можете передать экземпляр карты в Main компоненту ребенка как свойство:

const Main = React.createClass({ 

    componentDidMount: function() { 
    this.map = L.map('map', {}).setView([45, 0], min_zoom); 
    let layer = L.tileLayer('https://api....}', { }).addTo(map); 
    }, 

    render() { 
    return (
     <div id='map'> 
     <div id='container'> 
      {React.cloneElement(this.props.children, {map: this.map})} 
     </div> 
     </div> 
    ); 
    } 
}); 

Маршрут s/Travel.js

const Travel = React.createClass({ 

    componentDidMount: function() { 
    if (this.props.map) { 
     // whatever 
    } 
    }, 
    render() { 
     if (!this.props.map) return null; 

     return (
     <div id='storyBox'> 
     </div> 
    ); 
    }); 

    module.exports = Travel;