React Translated 开源项目教程

React Translated 开源项目教程

react-translatedA dead simple way to add complex translations (i18n) in a React (DOM/Native) project 🌎🌍🌏项目地址:https://gitcode.com/gh_mirrors/re/react-translated

项目介绍

React Translated 是一个用于 React 应用的国际化（i18n）库，旨在简化多语言支持的实现。该项目提供了一种简洁的方式来管理应用中的文本翻译，使得开发者可以轻松地将应用内容本地化为不同的语言。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 React Translated：

npm install react-translated

或者

yarn add react-translated

基本使用

以下是一个简单的示例，展示如何在 React 应用中使用 React Translated：

import React from 'react';
import { TranslatedProvider, Translate } from 'react-translated';

const App = () => {
  const translations = {
    en: {
      greeting: 'Hello, World!'
    },
    fr: {
      greeting: 'Bonjour, Monde!'
    }
  };

  return (
    <TranslatedProvider language="en" translations={translations}>
      <div>
        <Translate text="greeting" />
      </div>
    </TranslatedProvider>
  );
};

export default App;

在这个示例中，我们定义了一个包含英语和法语翻译的对象，并使用 TranslatedProvider 组件将其包裹在应用的根组件中。Translate 组件用于显示翻译后的文本。

应用案例和最佳实践

动态语言切换

React Translated 支持动态语言切换，允许用户在应用运行时更改语言设置。以下是一个实现动态语言切换的示例：

import React, { useState } from 'react';
import { TranslatedProvider, Translate } from 'react-translated';

const App = () => {
  const [language, setLanguage] = useState('en');

  const translations = {
    en: {
      greeting: 'Hello, World!'
    },
    fr: {
      greeting: 'Bonjour, Monde!'
    }
  };

  return (
    <TranslatedProvider language={language} translations={translations}>
      <div>
        <Translate text="greeting" />
        <button onClick={() => setLanguage('en')}>English</button>
        <button onClick={() => setLanguage('fr')}>French</button>
      </div>
    </TranslatedProvider>
  );
};

export default App;

在这个示例中，我们使用 useState 钩子来管理当前语言，并提供两个按钮来切换语言。

使用 JSON 文件管理翻译

为了更好地管理大型项目的翻译，可以将翻译内容存储在 JSON 文件中，并在应用中动态加载这些文件。以下是一个示例：

import React, { useState, useEffect } from 'react';
import { TranslatedProvider, Translate } from 'react-translated';
import enTranslations from './translations/en.json';
import frTranslations from './translations/fr.json';

const App = () => {
  const [language, setLanguage] = useState('en');
  const [translations, setTranslations] = useState({});

  useEffect(() => {
    if (language === 'en') {
      setTranslations(enTranslations);
    } else if (language === 'fr') {
      setTranslations(frTranslations);
    }
  }, [language]);

  return (
    <TranslatedProvider language={language} translations={translations}>
      <div>
        <Translate text="greeting" />
        <button onClick={() => setLanguage('en')}>English</button>
        <button onClick={() => setLanguage('fr')}>French</button>
      </div>
    </TranslatedProvider>
  );
};

export default App;

在这个示例中，我们使用 useEffect 钩子来根据当前语言加载相应的翻译文件。

典型生态项目

React Translated 可以与其他 React 生态项目结合使用，以提供更丰富的功能。以下是一些典型的生态项目：

React Router

React Router 是一个流行的 React 路由库，可以与 React Translated 结合使用，以实现多语言路由。以下是一个示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { TranslatedProvider, Translate } from 'react

react-translatedA dead simple way to add complex translations (i18n) in a React (DOM/Native) project 🌎🌍🌏项目地址:https://gitcode.com/gh_mirrors/re/react-translated