如何解决Flyto 错误:Hooks 只能在函数组件的主体内部调用
尝试添加一个按钮,按下时会将地图移动到纽约市。但是每当我尝试使用按钮时,我都会收到错误消息:
错误:无效的挂钩调用。 Hooks 只能在 body 内部调用 一个功能组件。这可能发生在以下情况之一 原因
我知道我需要将 flyto 的钩子放入一个函数中,因为它是一个钩子,但是你如何将它与类组件结合起来。
代码:
export default class App extends React.Component {
constructor() {
super();
this.onClickNewYork = this.onClickNewYork.bind(this)
}
onClickNewYork() {
const { map } = useLeaflet();
map.flyTo([40.730610,-73.935242],15)
}
return (
<>
<Button onPress={this.onClickNewYork}>
<Map center={position} zoom={0}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</map>
</>
)
}
解决方法
在 react-leaflet 版本 2.x 中你不能这样做。此外,您不能在基于类的组件中使用钩子。
通常要使用 withLeaflet HOC 来获取地图参考,但这仅在作为 Map 子组件放置的组件中可用。
您在这里应该做的是使用 ref
获取地图引用,然后使用它来调用 map.fly()
mapRef = React.createRef();
onClickNewYork() {
this.mapRef.current.leafletElement.flyTo([40.73061,-73.935242],15);
}
<Map
center={position}
zoom={0}
style={{ height: "90vh" }}
ref={this.mapRef}
>
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。