javascript - 来自兄弟组件的子组件的 google-maps-react onClick onMarkerClick

Question

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

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

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

export default App;

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

 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}
              />
            );
          })}

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

Answer 1

Convert App component to a class component, and create a state object and bind a class method.

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>
    );
  }
}

Inside , pass the handleClick prop to the , then call handleClick() inside of the method that's meant to activate onMarkerClick.

Then, inside , call onMarkerClick when isMainClicked is true.

That should do it.