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

У меня есть компонент 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?


reactjs javascript mapbox-gl-js javascript-objects javascriptmvc
person gosseti    schedule 17.12.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Создайте переменную map в другом методе жизненного цикла, таком как componentWillMount() или componentWillReceiveProps(), и присвойте значение карты this.state с помощью метода setState().

eg:

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: см. спецификации компонентов и жизненный цикл из React Docs, чтобы понять, где использовать setState() метод, а где нет.

person Naisheel Verdhan    schedule 17.12.2015

arrow_upward
3
arrow_downward

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

person Brandon    schedule 17.12.2015