如何在React中用navigator.language实现本地化时段问候？Chrome扩展兼容问题

完全可以通过navigator.language实现这个需求，而且这种原生API方案在Chrome扩展里兼容性更好，能避开react-i18n可能遇到的配置或环境问题。

具体实现步骤 #

• 定义多语言的时段问候语映射表，覆盖需要支持的语言
• 通过navigator.language获取用户浏览器的首选语言代码
• 根据当前时间判断所属时段（早上/中午/下午/晚上）
• 在React组件中匹配对应语言和时段的问候语

示例代码 #

import { useState, useEffect } from 'react';

// 多语言问候语配置，key为语言代码（支持带地区的如zh-CN，或简化的zh）
const greetings = {
  'en': {
    morning: 'Good morning!',
    noon: 'Good noon!',
    afternoon: 'Good afternoon!',
    evening: 'Good evening!'
  },
  'zh-CN': {
    morning: '早上好！',
    noon: '中午好！',
    afternoon: '下午好！',
    evening: '晚上好！'
  },
  'es': {
    morning: '¡Buenos días!',
    noon: '¡Buenas tardes!',
    afternoon: '¡Buenas tardes!',
    evening: '¡Buenas noches!'
  }
};

// 获取当前时段
const getTimePeriod = () => {
  const hour = new Date().getHours();
  if (hour < 12) return 'morning';
  if (hour < 14) return 'noon';
  if (hour < 18) return 'afternoon';
  return 'evening';
};

function Greeting() {
  const [greeting, setGreeting] = useState('');

  useEffect(() => {
    // 获取用户语言，兼容带地区的代码（如zh-CN转为zh，若没有对应配置则 fallback 到en）
    const userLang = navigator.language;
    const langKey = greetings[userLang] ? userLang : userLang.split('-')[0];
    const targetLang = greetings[langKey] || greetings['en'];
    
    const period = getTimePeriod();
    setGreeting(targetLang[period]);
  }, []);

  return <div className="greeting">{greeting}</div>;
}

export default Greeting;

Chrome扩展适配提示 #

在Chrome扩展的popup、content script或options页面中使用时，navigator.language的行为和普通网页一致，无需额外配置权限。如果之前react-i18n失效，大概率是因为扩展的文件路径限制（如public资源访问）或内容安全策略（CSP）限制，而原生API方案完全不受这些影响，更适合扩展环境。

内容的提问来源于stack exchange，提问作者Anusha