MapboxMap
Mapbox マップ ( map
const の下) を初期化してレンダリングする 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