触发器usePosition()自定义挂钩单击元素

Question

当我试图在onClick事件中触发usePosition钩子时，我遇到了一些麻烦。

我想要实现的是将浏览器触发的地理定位权限提示延迟到用户单击某个元素。

到目前为止，我尝试了以下代码的一系列变体，但没有成功：

const IndexPage = () => {
const [geolocation, setGeolocation] = useState({});
const [isGeolocationActive, triggerGeolocation] = useState(false);
let currentPosition = usePosition();
function handleGeolocation() {
if (isGeolocationActive) {
setGeolocation(currentPosition)
console.log('geolocation', geolocation)
} else triggerGeolocation(true);
}
return (
<Layout>
<Wrapper type={`list`} classNames={`wrapper pet__cards cards__list`}>
<Card>
<Image/>
<div onClick={() => handleGeolocation()}>Click me to share my location</div>

我已经尝试设置了一个useState挂钩(最初设置为false(，如果设置为true，它应该控制和处理usePosition挂钩，但浏览器仍然要求我一登录页面就获得地理定位权限。

编辑：我还尝试将usePosition挂钩放在另一个组件中，并将其称为onClick事件。然而，在这种情况下，我面临一些钩子规则错误，例如：

"无效的钩子调用。钩子只能在功能组件。以下情况之一可能会发生这种情况原因。。。">

Answer 1

最后，我在另一个组件中使用usePosition钩子解决了这个问题，如下所示：

import React from "react";
import {usePosition} from "use-position";
const Geolocation = () => {
let currentPosition = usePosition();
return (
<div>
<p>{currentPosition.latitude}</p>
</div>
)
};
export default Geolocation;

在我的主要组件中，我使用了一个useState钩子，它控制渲染，如下所示：

const IndexPage = () => {
const [geolocation, setGeolocation] = useState('');
function handleGeolocation() {
setGeolocation(<Geolocation/>);
}
return (
<Layout>
<Card>
<Image/>
<div onClick={() => handleGeolocation()}>Click me to share my location</div>
{geolocation}
...