react 组件相互调用方法求助（百度地图方向）

Question

网上已经有很多例子关于组件相互调用方法。
但我们有个需求是点击百度覆盖物调用另外一个组件方法。

这是 Map页面 监听点击覆盖物的方法

 // 点击覆盖物获取对应id与小区名
        ply.addEventListener("click", function () {
          alert('id:' + data[i].id + '，小区名：' + data[i].name);
        })

然后右侧的信息框是同级B组件，它有一个隐藏呈现的方法：

  arrowRightClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn,
      right: prevState.isToggleOn ? '0' : '-450px',
    }));
  }

现在就是在循环监听覆盖物并响应arrowRightClick();当然这样写肯定报错。如何在覆盖物监听事件中响应B页面中的arrowRightClick()方法。

// 点击覆盖物获取对应id与小区名
        ply.addEventListener("click", function () {
          alert('id:' + data[i].id + '，小区名：' + data[i].name);
          arrowRightClick();
        })

Answer 1

你的地图组件 ComponentA,信息框组件ComponentB。

父组件

handleShowDetails = () => {
    this.refs.componentB.arrowRightClick();
}

<div>
    <ComponentA handleShowDetails="handleShowDetails"/>
    <ComponentB ref="componentB" />
</div>

在ComponentA里

ply.addEventListener("click", () => {
   alert('id:' + data[i].id + '，小区名：' + data[i].name);
   this.props.handleShowDetails();
});