React组件读取JSON实现多语言切换问题求助

问题根源分析 #

你当前方案的核心问题是：fs是Node.js专属的文件系统模块，前端浏览器环境无法直接调用，直接在组件中使用会导致运行报错。另外之前用静态对象实现时，没有通过状态管理触发组件重新渲染，所以切换语言后文本不会更新。

基础实现方案（React/Next.js 适配） #

以下是适合新手的极简实现，用状态管理+静态导入语言文件解决问题：

1. 语言文件结构（保持你的lang.json）

// app/lang.json
{
  "en": {
    "about": "About",
    "pricing": "Pricing",
    "contact": "Contact"
  },
  "ar": {
    "about": "عنّا",
    "pricing": "التسعير",
    "contact": "اتصل بنا"
  }
}

2. 头部组件代码

如果是Next.js项目，需要添加'use client'标记为客户端组件（服务器组件无法使用状态）：

'use client';

import { useState, useEffect } from 'react';
// 直接静态导入语言文件，无需fs读取
import langData from './lang.json';

export default function Header() {
  // 用useState管理当前语言状态
  const [currentLang, setCurrentLang] = useState('en');

  // 初始化时从本地存储读取用户偏好语言（可选，实现刷新不重置）
  useEffect(() => {
    const savedLang = localStorage.getItem('preferredLang');
    if (savedLang) setCurrentLang(savedLang);
  }, []);

  // 语言切换逻辑
  const toggleLanguage = () => {
    const newLang = currentLang === 'en' ? 'ar' : 'en';
    setCurrentLang(newLang);
    localStorage.setItem('preferredLang', newLang);
  };

  // 根据当前语言生成导航项
  const navigation = [
    { name: langData[currentLang].about, href: "#about" },
    { name: langData[currentLang].pricing, href: "#pricing" },
    { name: langData[currentLang].contact, href: "#contact" },
  ];

  return (
    <header>
      {/* 语言切换按钮 */}
      <button onClick={toggleLanguage}>
        {currentLang === 'en' ? 'العربية' : 'English'}
      </button>
      {/* 导航菜单 */}
      <nav>
        <ul>
          {navigation.map(item => (
            <li key={item.href}>
              <a href={item.href}>{item.name}</a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
}

关键要点说明 #

• 静态导入语言文件：前端环境支持直接导入JSON文件，避免使用Node.js的fs模块，解决浏览器兼容性问题。
• 状态驱动渲染：用useState跟踪当前语言，切换时更新状态会自动触发组件重新渲染，实现文本实时切换。
• 持久化偏好：通过localStorage保存用户选择的语言，刷新页面后保持设置。

进阶优化（可选） #

如果你的项目规模较大，后续可以引入专业的多语言库（如react-i18next），它能提供更完善的功能：自动检测浏览器语言、批量加载语言包、插值翻译等，但对于新手来说，先掌握基础的状态管理方案更易理解。

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