0

我有一个MapboxMapReact 组件，它初始化并渲染 Mapbox 地图（在mapconst 下），并且需要在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？

4

2 回答 2

3

Naisheel Verdhan 的方法很好。我会在此基础上提出一个建议。除了在componentWillMount()or中设置状态componentWillReceiveProps()，您可以在getInitialState()(React.createClass语法) 或 constructor() （ES2015，class extends React.Component语法）中进行。

于 2015-12-17T16:24:07.463 回答
2

在其他一些生命周期方法中创建map变量，例如componentWillMount()orcomponentWillReceiveProps()并将 map 的值分配给this.stateviasetState()方法。

例如：

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()方法以及在哪里不使用。

于 2015-12-17T15:02:43.370 回答