ReactJS 与 Google Maps - 随时显示一个信息窗口

Question

我正在使用 react-google-maps 并且能够显示标记和 InfoWindow - 工作正常，但我只想显示当前活动的标记窗口。

我正在使用 isOpen 状态来存储当前标记并显示它是否与当前键匹配，但它仍然允许您单击并切换所有标记信息窗口。我怀疑我犯了一个非常简单的错误，但我对 ReactJS 还是很陌生。另外，请注意我发现了非常相似的问题，但没有一个可以帮助我解决这个问题。

这是我的代码..

    constructor(props){
    super(props);

    this.state = {
        isOpen: '',
    }

}

handleToggleOpen = (e) => {

   this.setState({
       isOpen: e
   });

   console.log(e);
   console.log('current state is... ');
   console.log(this.state.isOpen);
}

handleToggleClose = () => {
    this.setState({
        isOpen: null
    });
}

render() {

    // console.log(this.props.marker.id)

    return (

            <div>
        <Marker
            key={this.props.marker.id}
            position={{ lat: parseFloat(this.props.marker.acf.locations.lat), lng: parseFloat(this.props.marker.acf.locations.lng)}}
              icon={{
               url: this.props.icon,
               optimized: false,
               scaledSize: new google.maps.Size(25, 37),
             }}
             onClick={() =>  this.handleToggleOpen(this.props.marker.id)}
             audioPlay={this.props.audioPlay} >

                {
                        this.state.isOpen === this.props.marker.id && (
                     <InfoWindow onCloseClick={this.handleToggleClose}>
                        <div>
                         <h3 className="infowindow__title">{this.props.marker.title.rendered} {this.props.marker.acf.title_sub} </h3>
                         <span onClick={() =>this.refs.componentToDisplay.showPopup()} className="infowindow__link underline">Learn more</span>
                        </div>
                     </InfoWindow>)
                    }

            <PlacePopup ref="componentToDisplay" title={this.props.marker.title.rendered} intro={this.props.marker.acf.text} id={this.props.marker.id} subtitle={this.props.marker.acf.title_sub} audio={this.props.marker.acf.file} audioPlay={this.props.audioPlay}  >
                        </PlacePopup>
        </Marker> 
    </div>
        )
}

Answer 1

由于每个标记都有自己的状态，因此您必须找到一种方法来连接每个标记组件的每个状态对象。您需要每个标记的状态的原因是，当单击其中一个标记时，它必须通知所有其他标记有一个标记被单击，因此如果它们的窗口打开，则必须立即关闭它。在这种情况下，我建议使用 Redux 解决这个问题（因为你说你还是 React 的新手，我不太确定你是否已经熟悉 Redux，所以如果你熟悉请告诉我cmets 和我将尝试帮助提供使用 Redux 的解决方案）。我相信你在没有 Redux 的帮助下仍然可以解决这个问题，但是将来它可能会变得非常复杂和难以控制。

此外，我认为您的代码中有几处需要先修复。将状态内的isOpen 设置为布尔值而不是字符串会更好。因此，您应该对代码进行以下更改：

1. 在你的构造函数中，初始化isOpen:

   this.state = { 是开放的：假 }

2. 在你的handleToggleOpen函数内部，不需要传递任何参数，所以你可以去掉e：

   handleToggleOpen = () => { 这个.setState({ isOpen: !this.state.isOpen }); }

这基本上就是切换功能，因此您也可以删除您的handleToggleClose 函数（因为handleToggleOpen 处理打开和关闭），然后在您的渲染函数中将其替换为handleToggleOpen。

1. 现在你只需要改变

this.state.isOpen === this.props.marker.id &&

进入简单

this.state.isOpen &&

那么它应该可以正常工作，而无需每次都比较每个标记的 id。