React I18nify 使用教程

React I18nify 使用教程

react-i18nifySimple i18n translation and localization components and helpers for React.项目地址:https://gitcode.com/gh_mirrors/re/react-i18nify

项目介绍

React I18nify 是一个简洁而强大的组件库，专为 React 开发设计，旨在简化你的国际化（i18n）和本地化（l10n）工作流程。它提供了直观的 API 和组件，让你能够快速集成多语言支持到你的 React 项目中。

项目快速启动

安装

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

npm install react-i18nify
# 或者使用 yarn
yarn add react-i18nify

初始化

在你的项目中引入并初始化 React I18nify：

import { I18n } from 'react-i18nify';

I18n.setTranslations({
  en: {
    application: {
      title: 'Awesome app with i18n',
      hello: 'Hello, %{name}!',
    },
  },
  nl: {
    application: {
      title: 'Toffe app met i18n',
      hello: 'Hallo, %{name}!',
    },
  },
});

I18n.setLocale('en');

使用组件

在你的 React 组件中使用 Translate 和 Localize 组件：

import { Translate, Localize } from 'react-i18nify';

const App = () => (
  <div>
    <h1><Translate value="application.title" /></h1>
    <p><Translate value="application.hello" name="World" /></p>
    <Localize value="2023-01-01" dateFormat="date" />
  </div>
);

export default App;

应用案例和最佳实践

动态切换语言

你可以通过改变 I18n.setLocale 的参数来动态切换语言：

const changeLanguage = (locale) => {
  I18n.setLocale(locale);
};

// 在你的组件中调用
<button onClick={() => changeLanguage('nl')}>Switch to Dutch</button>

处理缺失翻译

当遇到未找到的翻译时，你可以自定义返回的结果：

I18n.setHandleMissingTranslation((key, replacements) => {
  return `Missing translation: ${key}`;
});

典型生态项目

React Router 国际化

结合 React Router 实现路由的国际化：

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route path="/:lang" component={MainComponent} />
      <Redirect to="/en" />
    </Switch>
  </Router>
);

const MainComponent = ({ match }) => {
  const { lang } = match.params;
  I18n.setLocale(lang);

  return (
    <div>
      <h1><Translate value="application.title" /></h1>
      <p><Translate value="application.hello" name="World" /></p>
    </div>
  );
};

通过以上步骤，你可以快速上手并充分利用 React I18nify 实现 React 应用的国际化和本地化。

react-i18nifySimple i18n translation and localization components and helpers for React.项目地址:https://gitcode.com/gh_mirrors/re/react-i18nify