不使用i18next及相关库，如何用ReactJs搭建多语言网站？

完全可以不依赖i18next这类第三方库，基于React自身的API实现多语言功能，核心思路是用Context管理语言状态+语言资源文件来完成文本的动态切换。以下是具体实现步骤：

1. 创建语言资源文件 #

在项目中新建多语言文本的键值对文件，比如：

// src/locales/en.js

export default {
  greeting: "Hello!",
  welcome: "Welcome to our website",
  button: "Switch Language",
  messageCount: "You have {{count}} unread messages"
};

// src/locales/zh.js

export default {
  greeting: "你好！",
  welcome: "欢迎访问我们的网站",
  button: "切换语言",
  messageCount: "你有 {{count}} 条未读消息"
};

2. 实现语言状态管理Context #

用React的createContext封装语言状态、翻译方法和切换逻辑：

// src/contexts/LanguageContext.js

import { createContext, useState, useContext } from 'react';
import en from '../locales/en';
import zh from '../locales/zh';

const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
  // 从localStorage恢复用户上次选择的语言，默认英文
  const [currentLang, setCurrentLang] = useState(() => {
    return localStorage.getItem('preferredLang') || 'en';
  });

  // 获取对应语言的文本，支持动态参数替换
  const getTranslation = (key, params = {}) => {
    const locales = { en, zh };
    let text = locales[currentLang][key] || key;
    
    // 替换{{param}}格式的占位符
    Object.keys(params).forEach(param => {
      text = text.replace(`{{${param}}}`, params[param]);
    });
    
    return text;
  };

  // 切换语言并持久化到localStorage
  const toggleLanguage = () => {
    const newLang = currentLang === 'en' ? 'zh' : 'en';
    setCurrentLang(newLang);
    localStorage.setItem('preferredLang', newLang);
  };

  return (
    <LanguageContext.Provider value={{ currentLang, getTranslation, toggleLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

// 自定义Hook简化Context调用
export const useLanguage = () => useContext(LanguageContext);

3. 在根组件中注入Provider #

将整个应用包裹在LanguageProvider下，让所有子组件都能访问语言状态：

// src/App.js

import { LanguageProvider } from './contexts/LanguageContext';
import Home from './components/Home';

function App() {
  return (
    <LanguageProvider>
      <Home />
    </LanguageProvider>
  );
}

export default App;

4. 在业务组件中使用多语言 #

通过自定义HookuseLanguage获取翻译方法和切换函数：

// src/components/Home.js

import { useLanguage } from '../contexts/LanguageContext';

const Home = () => {
  const { getTranslation, toggleLanguage } = useLanguage();

  return (
    <div style={{ padding: '20px' }}>
      <h1>{getTranslation('greeting')}</h1>
      <p>{getTranslation('welcome')}</p>
      <p>{getTranslation('messageCount', { count: 3 })}</p>
      <button onClick={toggleLanguage} style={{ marginTop: '10px' }}>
        {getTranslation('button')}
      </button>
    </div>
  );
};

export default Home;

进阶优化方向 #

• 支持更多语言：只需新增对应语言的资源文件，在locales对象中引入即可
• 处理复杂场景：比如日期、数字格式化，可以在getTranslation中扩展对应逻辑
• 懒加载语言包：如果语言文件体积大，可通过import()动态加载，减少初始打包体积

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