Reactjs 谷歌地图和列表

我想知道是否有人使用谷歌地图反应库来创建标记和列表项目。我有一个地图组件，正在渲染地图、标记和信息窗口。我还有另一个组件，它包含代表每个标记值的所有位置列表（li）。是否有某种方法可以单击列表项，并触发相应标记的单击事件

如果列表中包含标记的信息，则在尝试从子级到父级通信时，需要提升状态。因此，理想情况下，标记位置存在于父对象中，以及要调用的函数中（在您的示例中为Map）。从列表项调用它，通过道具将函数传递到列表组件，如下所示：

<List handleMarkers={this.function}/>

通过this.props.handleMarkers访问子级中的函数

我想你是说，对吧？ 假设您有一个组件来选择地址：

const CityList = props => {
  return (
    <div>
      <ul>
        {props.items.map((item, index) => {
          return (
            <li key={index} onClick={e => props.onClick(e, item)}>
              {item.title}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

供参考

class App extends Component {
  state = {
    selectedItem: { lat: 0, lng: 0 }
  };

  showInfo(e, selectedItem) {
    this.setState({ selectedItem: selectedItem });
  }

  render() {
    return (
      <div>
        <CityList items={data} onClick={this.showInfo.bind(this)} />
        <MapContainer
          center={{ lat: -24.9923319, lng: 135.2252427 }}
          zoom={4}
          data={data}
          selectedItem={this.state.selectedItem}
        />
      </div>
    );
  }
}