（React ES6）マップマーカーにモーダルトリガーを動的に追加する

Question

レスキューブートストラップを使用してReact in ES6の同じデータからモーダルとマーカーを動的に作成し、マーカーをモーダルのトリガーにすることを試みています。ここで

class SimpleMapPage extends React.Component { 
    //shouldComponentUpdate = shouldPureComponentUpdate; 
    constructor(props) { 
     super(props); 
     this.state = { 
      userPosition: {lat: 40.7128, lng: -74.0059}, 
      defaultCenter: { 
       lat: 40.7128, 
       lng: -74.0059 
      }, 
      zoom: 12, 
      showModal: false 
     } 
     this.close = this.close.bind(this); 
     this.open = this.open.bind(this); 
     this._onChildClick = this._onChildClick.bind(this); 

    } 

    close() { 
     this.setState({ showModal: false }); 
     } 

    open() { 
     this.setState({ showModal: true }); 
     } 


    _onChildClick(key, childProps){ 
     console.log('ow'); 
     this.setState({ showModal: true}); 
     const markerId = childProps.marker.get("id"); 
     const index = this.props.markers.findIndex(m => m.get('id') === marker.name); 
     if (this.props.onChildClick) { 
     this.props.onChildClick(index); 
     } 
    } 



    componentDidMount() { 
     this.getCurrentPosition(); 
    } 

    markers(){ 
     return Markers.find().fetch(); 
    } 
    render() { 
     console.log(this.state.userPosition) 



     return (
      <div style={divStyle}> 
       <GoogleMap bootstrapURLKeys={{ 
        key: 'AIzaSyDAQIZigb4sd4EIMVeDZ1jxdx8tH9QRyEM', 
        language: 'us' 
       }} 
        center={this.state.userPosition} 
        zoom={this.state.zoom} 
        defaultCenter={this.state.defaultCenter} 
        defaultZoom={this.state.zoom} 
        hoverKey= "lol" 
        hoverDistance={40/2} 
        visibleRowFirst= "-1" 
        visibleRowLast= "-1" 
        hoveredRowIndex= "-1" 
        onChildClick={this._onChildClick} 

        > 

         {this.markers().map((marker) => { 
         return <MyGreatPlace key={marker.name} lat={marker.lat} lng={marker.lng} hover="lol" /> 
         })} 

         {this.markers().map((marker) => { 
         return <Modal show={this.state.showModal} onHide={this.close} id={marker.name}> 
         <Modal.Header closeButton> 
          <Modal.Title>{marker.name}</Modal.Title> 
         </Modal.Header> 
         <Modal.Body> 
          <h4>{marker.description}</h4> 
          <a href={"https://www.google.com/maps/dir/Current+Location/"+marker.lat+'+'+marker.lng} target="_blank">Click Here for Directions</a> 
         </Modal.Body> 
         </Modal> 
         })} 

         <MyGreatPlace lat={this.state.userPosition.lat} lng={this.state.userPosition.lng} text="You" /> 
       </GoogleMap> 
      </div> 
     ); 
    } 
} 

SimpleMapPage.propTypes = { 
    center: PropTypes.array, // @controllable 
    zoom: PropTypes.number, // @controllable 
    hoverKey: PropTypes.string, // @controllable 
    clickKey: PropTypes.string, // @controllable 
    onCenterChange: PropTypes.func, // @controllable generated fn 
    onZoomChange: PropTypes.func, // @controllable generated fn 
    onHoverKeyChange: PropTypes.func, // @controllable generated fn 

    greatPlaces: PropTypes.array 
}; 

は、マップマーカーを作成するために、子として渡されるMyGreatPlacesコンポーネントです：

export default class MyGreatPlace extends Component { 
     constructor(props) { 
    super(props); 

     this.state= { 
      hover: PropTypes.bool, 
      text: PropTypes.string 
    } 
    } 

    render() { 
    const style = this.props.hover ? greatPlaceStyleHover : greatPlaceStyle; 

    return (
     <div className="hint" style={style}> 
      <div>{this.props.text}</div> 
      <div style={{width: 80}} className="hint__content"> 
      </div> 
     </div> 
    ); 
    } 
} 

Answer 1

今私は、マーカー/モーダルを作成するページの同じモーダル

コードを呼び出しておきますさて、データターゲットを設定するために、GoogleMapの子コンポーネントであるMarkerを使って_onclickメソッドを実行しなければなりませんでした：各マーカーの子に動的に追加する（独自のメソッドを参照する）