前端国际化实战:i18next 与 react-intl 使用指南
引言
前端应用拓展海外市场时,硬编码文本会导致维护困难。国际化(i18n)是构建全球产品的必要步骤。
反面教材
// 反面教材:硬编码文本
function App() {
return (
<div>
<h1>欢迎来到我的网站</h1>
<p>这是一个示例应用</p>
<button>点击我</button>
<div>
<h2>产品列表</h2>
<ul>
<li>产品 1</li>
<li>产品 2</li>
<li>产品 3</li>
</ul>
</div>
</div>
);
}
export default App;
正确姿势
1. i18next
// 配置 i18n.js
import i18n ;
{ initReactI18next } ;
resources = {
: {
: {
: ,
: ,
: ,
: ,
: ,
: ,
:
}
},
: {
: {
: ,
: ,
: ,
: ,
: ,
: ,
:
}
}
};
i18n
.(initReactI18next)
.({
resources,
: ,
: ,
: { : }
});
i18n;

