从多个 React 组件访问对象
Access object from multiple React components
我有一个 MapboxMap
React 组件,用于初始化和渲染 Mapbox 地图(在 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
变量,如 componentWillMount()
或 componentWillReceiveProps()
,并通过 setState()
方法将映射的值分配给 this.state
。
例如:
state = {map: {}} // defined a default state
componentWillReceiveProps(nextProps){
map = new mapboxgl.Map({ //your code });
this.setState({ map: map});
}
现在,将 this.state.map
作为道具传递给子 MapMarker。在 <MapboxMap/>
、
中的 render()
方法中
<MapMarker key={photo.id} photo={photo} map={this.state.map}/>
现在在 <MapMarker/>
组件中,您的父 <MapboxMap/>
组件的地图将可以作为 this.props.map
.
访问
PS:请参阅 React 文档中的 Component Specs and Lifecycle,以了解在何处使用 setState()
方法以及在何处不使用。
Naisheel Verdhan 的方法很好。我会在此之上提出一个建议。您可以在 getInitialState()
(React.createClass
语法)或在构造函数()(ES2015,class extends React.Component
语法)。
我有一个 MapboxMap
React 组件,用于初始化和渲染 Mapbox 地图(在 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
变量,如 componentWillMount()
或 componentWillReceiveProps()
,并通过 setState()
方法将映射的值分配给 this.state
。
例如:
state = {map: {}} // defined a default state
componentWillReceiveProps(nextProps){
map = new mapboxgl.Map({ //your code });
this.setState({ map: map});
}
现在,将 this.state.map
作为道具传递给子 MapMarker。在 <MapboxMap/>
、
render()
方法中
<MapMarker key={photo.id} photo={photo} map={this.state.map}/>
现在在 <MapMarker/>
组件中,您的父 <MapboxMap/>
组件的地图将可以作为 this.props.map
.
PS:请参阅 React 文档中的 Component Specs and Lifecycle,以了解在何处使用 setState()
方法以及在何处不使用。
Naisheel Verdhan 的方法很好。我会在此之上提出一个建议。您可以在 getInitialState()
(React.createClass
语法)或在构造函数()(ES2015,class extends React.Component
语法)。