触发 usePosition() 自定义钩子 onClick 元素

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 事件。但是，在这种情况下，我会遇到一些钩子规则错误，例如：

"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons..."

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}
                ...

触发 usePosition() 自定义钩子 onClick 元素

Trigger usePosition() custom hook onClick element

javascript

geolocation

reactjs

gatsby

react-hooks