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

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

这是 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();
})

回答

你的地图组件 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();
});

以上是 react 组件相互调用方法求助（百度地图方向） 的全部内容， 来源链接： utcz.com/a/27824.html

回到顶部