Question

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

json组件文件的一部分如下：

app.js

以下是控制function App() { return ( <div className="App"> <Main /> <MyTaxiMain /> <MapContainer /> </div> ); } export default App;的{{1}}的内容：

map.js

我正在使用一个<MapContainer /> json文件来渲染地图的长条和纬度。

Answer 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属性传递到，然后在要激活handleClick()的方法内部调用onMarkerClick。

然后在onMarkerClick为isMainClicked时在内部调用true。

应该这样做。

与同级组件的子对象进行google-maps反应onClick onMarkerClick

1 个答案: