如何在React中實現自定義Hook以訪問瀏覽器的位置信息

要在React中實現自定義Hook以訪問瀏覽器的位置信息，可以使用navigator.geolocation來獲取用戶的地理位置信息。以下是一個簡單的自定義Hook示例：

import { useState, useEffect } from 'react';

const UseGeolocation = () => {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        });
      });
    } else {
      console.log('Geolocation is not supported by this browser.');
    }
  }, []);

  return location;
};

export default UseGeolocation;

然后，在你的組件中使用自定義Hook來獲取位置信息：

import React from 'react';
import UseGeolocation from './UseGeolocation';

const LocationComponent = () => {
  const location = UseGeolocation();

  return (
    <div>
      {location ? (
        <div>
          <p>Latitude: {location.latitude}</p>
          <p>Longitude: {location.longitude}</p>
        </div>
      ) : (
        <p>Loading location...</p>
      )}
    </div>
  );
};

export default LocationComponent;

在上面的示例中，UseGeolocation是一個自定義Hook，它使用navigator.geolocation來獲取用戶的位置信息，并將其存儲在location狀態中。然后在LocationComponent組件中使用該自定義Hook來顯示用戶的位置信息。