如何在 React 中实现警报消息，以在尚未授予或拒绝地理定位权限时通知用户？

Question

我想在用户尚未选择允许或拒绝时显示一条警报消息。我已经为此目的实施了状态管理，但该消息没有显示。我正在使用导航器 API。这是我的代码：

const [noGeo, setNogeo] = useState(false);
  useEffect(() => {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        formik.setFieldValue('latitud', position.coords.latitude);
                        formik.setFieldValue('longitud', position.coords.longitude);
                    },
                    function (error) {
                        console.error("Error getting geolocation: ", error.message);
                    },
                    {
                        enableHighAccuracy: true,
                        timeout: 5000,
                        maximumAge: 0
                    }
                );
            } else {
                setNogeo(true);
            }
        }

       
    }, []);

return (
<>
{noGeo ? <AlertMessage />: ''}
</>
);

我希望在用户决定允许或拒绝访问位置之前显示警报消息组件。

Answer 1

import React, { useState, useEffect } from 'react';

function App() {
  const [permissionStatus, setPermissionStatus] = useState('pending');

  useEffect(() => {
    // Check if geolocation is supported by the browser
    if (!navigator.geolocation) {
      alert('Geolocation is not supported by your browser');
      return;
    }

    // Check permission status when component mounts
    navigator.permissions.query({ name: 'geolocation' })
      .then(permission => {
        setPermissionStatus(permission.state);
      });

    // Subscribe to permission changes
    const permissionHandler = (permission) => {
      setPermissionStatus(permission.state);
    };
    navigator.permissions.addEventListener('change', permissionHandler);

    // Clean up subscription on component unmount
    return () => {
      navigator.permissions.removeEventListener('change', permissionHandler);
    };
  }, []);

  // Render alert message based on permission status
  const renderAlertMessage = () => {
    if (permissionStatus === 'granted') {
      return null; // Geolocation permission granted, no need to show alert
    } else if (permissionStatus === 'denied') {
      return <div>Please enable geolocation in your browser settings to use this app.</div>;
    } else {
      return <div>Waiting for geolocation permission...</div>;
    }
  };

  return (
    <div>
      {renderAlertMessage()}
      {/* Your app content here */}
    </div>
  );
}

export default App;

尝试此代码，这将有助于弹出警报