觸發 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事件。 但是，在這種情況下，我面臨一些鈎子規則錯誤，例如：

“無效的鈎子調用。只能在 function 組件的主體內部調用鈎子。這可能由於以下原因之一發生......”

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