Javascript 反应谷歌地图信息窗口切换一次显示一个

我目前正在使用react google maps，通过单击地图或列表中的标记，我能够正确显示标记和信息窗口。但一旦我点击一个标记打开，即使我选择了一个新的窗口，以前的信息窗口仍然保持打开状态

如果单击列表中的“x”或标记，我可以关闭信息窗口。但我不知道如何自动关闭其他信息窗口，而只打开当前标记的信息窗口

我已经看了几个类似的问题来得到一个想法：

但我仍然在传递和检查唯一标记时遇到问题，因此只能显示与标记ID匹配的信息窗口

class MarkerInfoList extends Component {

  constructor(props){
    super(props);

    this.state = {
      isOpen: false
    };
  }

  handleToggleOpen = (markerId) => {
    this.setState({ 
      isOpen: true
    });
  }

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


render() {

  const isOpen = this.state.isOpen;

  return (

    <div>
      {this.state.isOpen ? (
        <ul>
          <li onClick={() => this.handleToggleClose()}>{this.props.venue}</li>

          <Marker
            key={this.props.index}
            id={this.props.index}
            position={{ lat: this.props.lat, lng: this.props.lng}}
            defaultAnimation={google.maps.Animation.DROP}
            onClick={() => this.handleToggleOpen(this.props.index)}>

            <InfoWindow 
                id = {this.props.index}
                onCloseClick={() => this.setState({isOpen: false})}>
                <div key={this.props.index}>
                  <h4>{this.props.venue}</h4>
                </div>
            </InfoWindow>  
          </Marker>
        </ul>

      ) : (

        <ul>
          <li onClick={() => this.handleToggleOpen()}>{this.props.venue}</li> 
        </ul>

      )
    }

  </div>

    )
  }
}

export default MarkerInfoList;

---

我想切换单个窗口，但还需要知道父组件上的位置是否处于活动状态。因此，在父组件中，我有一个活动键的状态。我将其作为activeKey组件传递给地图，并将所有位置数据作为位置传递给初始列表

两者都是通过道具传递的：

   <Map
            activeKey={this.state.activeKey}
            toggleLocationsActive={this.toggleLocationsActive}
          />

---

请注意，如果不要求父组件中存在此状态，可以在映射组件中执行此操作

我理解将活动位置与位置列表进行比较，但如何设置从父组件传递的状态？如果我从标记列表开始，当用户单击标记时，我会将特定标记位置设置为活动，并将其传递到子组件？编辑上面的我的答案以回答您的问题。由于您的解释，我能够让信息窗口一次打开一个。但每次我点击标记，地图就会重新渲染，正确的信息窗口就会打开。想知道你的地图是否也重新呈现？它正在进行一个新的API调用，并在我的应用程序中重新加载地图。

  toggleLocationsActive = locationKey => {
    this.setState({
      activeKey: locationKey
    });
  };

   <Map
            activeKey={this.state.activeKey}
            toggleLocationsActive={this.toggleLocationsActive}
          />