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()变量，并通过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：请参阅React Docs中的Component Specs and Lifecycle以了解使用setState()方法的位置，以及不使用的方法。

Answer 2

Naisheel Verdhan的做法很好。我会在此基础上提出一个建议。您可以在http://stackoverflow.com/questions/18463287/timeline-yaxis-format-with-minutesseconds-only（componentWillMount()语法）或构造函数（）（ES2015，componentWillReceiveProps()中执行此操作，而不是在getInitialState()或React.createClass中设置状态语法）。

从多个React组件访问对象

2 个答案: