(React ES6) 动态添加模态触发器到映射标记

Question

所以我尝试使用 react-bootstrap 从 ES6 中的 React 中的相同数据动态创建模态和标记，并让标记成为模态的触发器。现在我一直在调用相同的模态

生成标记/模态的页面代码：

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 方法，以便设置 data-target: 以动态添加到每个 Marker 子组件（并引用它自己的方法）