javascript - 从多个 React 组件访问对象

Question

我有一个 MapboxMap React 组件，它初始化并渲染 Mapbox map (在 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 组件内渲染 map ？

Answer 1

Naisheel Verdhan 的方法很好。除此之外我还想提出一个建议。您可以在 getInitialState() 中设置状态，而不是在 componentWillMount() 或 componentWillReceiveProps() 中设置状态 (React.createClass 语法)或在 constructor() 中(ES2015，class extends React.Component 语法)。