0

MapboxMapMapbox マップ ( mapconst の下) を初期化してレンダリングする React コンポーネントがあり、その中にコンポーネントをレンダリングする必要があります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

2 つのコンポーネントを構成して、両方のコンポーネントからアクセスできるようにするにはどうすればよいですか?ただし、具体的には、コンポーネントmap内のマップをレンダリングします。MapboxMap

4

2 に答える 2