高级特性
Pluralization(复数形式)
react-i18next
支持复数形式,允许你根据不同数量渲染不同的翻译。
// PluralExample.js import React from 'react'; import { useTranslation } from 'react-i18next'; function PluralExample({ count }) { const { t } = useTranslation(); return <div>{t('items', { count })}</div>; } export default PluralExample;
// en.json { "items": "{{count}} item", "items_plural": "{{count}} items" }
Namespace(命名空间)
使用命名空间可以更好地组织你的翻译。
// NamespacedComponent.js import React from 'react'; import { useTranslation } from 'react-i18next'; function NamespacedComponent() { const { t } = useTranslation('common'); return <div>{t('greeting')}</div>; } export default NamespacedComponent;
// en/common.json { "greeting": "Hello, World!" }
总结
react-i18next
是一个功能强大而灵活的国际化解决方案,它能够简化多语言应用的开发。通过初始化 i18n
、使用 useTranslation
钩子以及支持高级特性,你可以在 React 中轻松实现国际化。希望这篇博文对你深入理解 react-i18next
有所帮助。Happy coding!✨