Доступ к объекту из нескольких компонентов React

Question

У меня есть компонент MapboxMap React, который инициализирует и отображает карту Mapbox (под кодом map) и должен визуализировать MapMarker компонентов внутри него.

Это то, что MapboxMap выглядит следующим образом:

import React from 'react' 
import ReactDOM from 'react-dom' 
import MapMarker from './MapMarker' 

const MapboxMap = React.createClass({ 

    componentDidMount(argument) { 
    mapboxgl.accessToken = 'access_token' 
    // This is what I want to access from inside of <MapMarker /> 
    const map = new mapboxgl.Map({ 
     container: ReactDOM.findDOMNode(this), 
     style: 'mapbox://styles/mapbox/streets-v8', 
     center: [-74.50, 40], 
     zoom: 9 
    }) 
    }, 

    render() { 
    const errors = this.props.errors 
    const photos = this.props.photos 
    return (
     <div className='map'> 
     {errors.length > 0 && errors.map((error, index) => (
      <pre key={index}>Error: {error}</pre> 
     ))} 
     {errors.length === 0 && photos.map(photo => (
      <MapMarker key={photo.id} photo={photo} /> 
     ))} 
     </div> 
    ) 
    } 
}) 

module.exports = MapboxMap 

Это то, что MapMarker выглядит.

import React from 'react' 
import ReactDOM from 'react-dom' 
import MapboxMap from './MapboxMap' 

const MapMarker = React.createClass({ 

    render() { 
    const photo = this.props.photo 
    console.log(photo) 
    // I want to be able to access `map` inside of this component 
    return (
     <div className='marker'></div> 
    ) 
    } 

}) 

module.exports = MapMarker 

Как структурировать мои два компонента, так что я могу получить доступ map от обоих компонентов, а конкретно оказывать карту внутри MapboxMap компонента?

Answer 1

Создание map переменного в каком-либо другом методе Lifecycle как componentWillMount() или componentWillReceiveProps() и присвоить значение карты для this.state по setState() методы.

например:

state = {map: {}}       // defined a default state 
componentWillReceiveProps(nextProps){ 
    map = new mapboxgl.Map({ //your code }); 
    this.setState({ map: map}); 
} 

Теперь пройти this.state.map в качестве реквизита для ребенка MapMarker. Внутри ваш render() метода в <MapboxMap/>,

<MapMarker key={photo.id} photo={photo} map={this.state.map}/> 

Теперь внутри <MapMarker/> компонента карта из компонента родительского <MapboxMap/> будет доступна в качестве this.props.map.

PS: Обратитесь к Component Specs and Lifecycle из React Docs, чтобы узнать, где именно использовать метод setState(), а где нет.

Answer 2

Подход Naisheel Verdhan хорош. Я бы сделал одно предложение. Вместо того, чтобы устанавливать состояние в componentWillMount() или componentWillReceiveProps(), вы можете сделать это в getInitialState() (React.createClass синтаксисе) или в синтаксисе конструктора() (ES2015, class extends React.Component).