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 应用的国际化和本地化。