从多个React组件访问对象 [英] Access object from multiple React components

问题描述

我有一个 MapboxMap React组件初始化并渲染一个Mapbox地图（在 map const下），以及需要在其中呈现 MapMarker 组件。

I have a MapboxMap React component that initialises and renders a Mapbox map (under the map const), and needs to render MapMarker components inside of it.

这是 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 组件中渲染地图？

How can I structure my two components so that I can access map from both components, but specifically render the map inside of the MapboxMap component?

推荐答案

在 compo等其他生命周期方法中创建 map 变量nentWillMount（）或 componentWillReceiveProps（）并将map的值赋给 this.state 通过 setState（）方法。

Create the map variable in some other Lifecycle method like componentWillMount() or componentWillReceiveProps() and assign the value of map to this.state via setState() method.

例如：

state = {map: {}}                           // defined a default state
componentWillReceiveProps(nextProps){
  map =  new mapboxgl.Map({ //your code });
  this.setState({ map: map});
}

现在，传递 this.state.map 作为子MapMarker的道具。在< MapboxMap /> 中的 render（）方法内，

Now, pass this.state.map as props to child MapMarker. Inside your render() method in <MapboxMap/>,

<MapMarker key={photo.id} photo={photo} map={this.state.map}/>

现在< MapMarker /> 组件来自您的父< MapboxMap /> 组件的地图可以作为 this.props.map 进行访问。

Now inside <MapMarker/> component the map from your parent <MapboxMap/> component will be accessible as this.props.map.

PS：请参阅组件规格来自React Docs的生命周期，用于了解在何处使用 setState（）方法和不在哪里。

PS: Refer Component Specs and Lifecycle from React Docs for understanding where to use setState() method and where not.

这篇关于从多个React组件访问对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！