google-maps-react onClick onMarkerClick 来自同级组件的子组件答案

【问题标题】：google-maps-react onClick onMarkerClick from sibling component's childgoogle-maps-react onClick onMarkerClick 来自同级组件的子组件
【发布时间】：2019-09-29 20:24:53
【问题描述】：

我想点击</Main>子组件，称为<RenderTable/>并激活<MapContainer />中使用的onMarkerClick方法，这将显示<InfoWindow/>。也许我需要在app.js 中创建一个单一的事实来源，并可能传入key 或json 值以匹配标记？

app.js 组件文件的一部分是这样的：

function App() {
  return (
    <div className="App">
      <Main />
      <MyTaxiMain />
      <MapContainer />
    </div>
  );
}

export default App;

这是控制<MapContainer /> 的map.js 部分：

 return (
      <div className="map-class">
        <Map
          google={this.props.google}
          style={style}
          initialCenter={{
            lat: 53.5511,
            lng: 9.9937
          }}
          zoom={13}
        >
          {Car2go.placemarks.map((content, index) => {
            return (
              <Marker
                title={(index + 1).toString()}
                name={content.name}
                interior={content.interior}
                exterior={content.exterior}
                type="car2go"
                position={{
                  lat: content.coordinates[1],
                  lng: content.coordinates[0]
                }}
                onClick={this.onMarkerClick}
                icon={{
                  url: require("../images/car2go-pin.svg"),
                  anchor: new google.maps.Point(5, 58)
                }}
                key={index}
              />
            );
          })}

我正在使用Car2go json 文件来渲染长和纬度的地图。

【问题讨论】：

标签： javascript reactjs google-maps google-maps-markers google-maps-react

【解决方案1】：

将App组件转换为类组件，并创建状态对象并绑定类方法。

class App extends React.Component {
  constructor(props) {
    super(props); // needed because we're using state and also, binding a method.
    this.state = { isMainClicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // do whatever needs to be done.
    // change the value of "isMainClicked" to true
    this.setState({ isMainClicked: true });
  }

  render() {
    return (
      <div className="App">
        <Main handleClick={this.handleClick} />
        <MyTaxiMain />
        <MapContainer isMainClicked={this.state.isMainClicked} />
      </div>
    );
  }
}

在内部，将handleClick 属性传递给，然后在用于激活onMarkerClick 的方法内部调用handleClick()。

然后，在内部，当isMainClicked 是true 时，调用onMarkerClick。

应该可以的。

【讨论】：