前端国际化实战指南
为什么需要国际化
最近看到一个项目,想拓展海外市场,但所有文本都是硬编码在代码里的。
反面教材
// 反面教材:硬编码文本
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
// 正确姿势:i18next
// 1. 配置
// i18n.js
i18n ;
{ initReactI18next } ;
resources = {
: {
: {
: ,
: ,
: ,
: ,
: ,
: ,
:
}
},
: {
: {
: ,
: ,
: ,
: ,
: ,
: ,
:
}
}
};
i18n
.(initReactI18next)
.({
resources,
: ,
: ,
: {
:
}
});
i18n;
;
{ useTranslation } ;
() {
{ t, i18n } = ();
= () => {
i18n.(lng);
};
(
);
}
;
;
;
;
;
.(
,
.()
);

