कई प्रतिक्रिया घटकों से पहुंच वस्तु

वोट
0

मैं एक है MapboxMapघटक है कि initialises और (के तहत एक MapBox नक्शा renders प्रतिक्रिया mapस्थिरांक), और प्रस्तुत करने के लिए की जरूरत है 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घटक?

17/12/2015 को 12:44
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
2

बनाएं mapजैसे कुछ अन्य जीवनचक्र विधि में चर componentWillMount()या componentWillReceiveProps()और के लिए नक्शे के मूल्य निर्दिष्ट this.stateके माध्यम से setState()विधि।

उदाहरण के लिए:

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

पुनश्च: देखें घटक चश्मा और जीवनचक्र समझ जहां का उपयोग करने के लिए दस्तावेज़ प्रतिक्रिया से setState()विधि और जहां नहीं।

17/12/2015 को 13:02
का स्रोत उपयोगकर्ता

वोट
2

Naisheel Verdhan का दृष्टिकोण अच्छा है। मुझे लगता है कि एक के ऊपर एक सुझाव चाहते हैं। इसके बजाय में राज्य की स्थापना की componentWillMount()या componentWillReceiveProps(), आप इसे में कर सकते हैं getInitialState()( React.createClassसिंटेक्स) या निर्माता में () (ES2015, class extends React.Componentवाक्य रचना)।

17/12/2015 को 14:24
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more