从多个 React 组件访问对象

Question

我有一个 MapboxMap React 组件，用于初始化和渲染 Mapbox 地图（在 map const 下），并且需要在其中渲染 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 变量，如 componentWillMount() 或 componentWillReceiveProps()，并通过 setState() 方法将映射的值分配给 this.state。

例如：

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

现在，将 this.state.map 作为道具传递给子 MapMarker。在 <MapboxMap/>、

中的 render() 方法中

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

现在在 <MapMarker/> 组件中，您的父 <MapboxMap/> 组件的地图将可以作为 this.props.map.

访问

PS：请参阅 React 文档中的 Component Specs and Lifecycle，以了解在何处使用 setState() 方法以及在何处不使用。

Answer 2

Naisheel Verdhan 的方法很好。我会在此之上提出一个建议。您可以在 getInitialState()（React.createClass 语法）或在构造函数（）（ES2015，class extends React.Component语法）。

从多个 React 组件访问对象

Access object from multiple React components

javascript

javascriptmvc

javascript-objects

reactjs

mapbox-gl-js