react-i18next 将组件插入到翻译内容

2022-08-29 · 周一一般多云

今天依旧是日常维护业务代码,解决一处密码校验的相关功能。网络问题在 Clash 和 TUN 模式下略微有所改善,也就是期间发现的需求细节确认(找产品经理和后端校对)和修改,以及发现后端部分 Bug 之后的处理对现有的工作流有些许影响。

期间主要遇到一个问题,就是使用 react-i18next 库实现多语言网站的情况下如何将 JSX 内容插入到翻译内容里面。官方提供了一个叫 Trans组件,设置相关的 JSX 组件属性就可以轻松实现内容替换。

import { Trans, useTranslation } from 'react-i18next';

<Trans
  i18nKey="detailPasswordApply"
  defaults="抱歉,您无权访问该内容!可联系所有者 <login>{{name}}</login> 申请权限"
  values={{ name: owner }}
  components={{ login: <a /> }}
/>

// 抱歉,您无权访问该内容!可联系所有者 <a>Paul</a> 申请权限

关于日常嘛,中午去真功夫吃午饭(周一会员日有 24 块的套餐),之后顺便去超市买了三瓶独特的饮料,全是我没喝过的口味,分别是格瓦斯、白柚青竹可乐和茉莉蜜桃芬达。

这并不是什么饮料刺客,每瓶都没有超过 6 块钱。格瓦斯是我最不抱希望的饮料,打算优先尝试,结果发现就是液体面包,并不是很难喝。这是一款地方特色的饮料,好比是广东人的沙示,外地人有些喝不惯的会说是清凉油~

いつもの風景から始まる物語

いつもの風景から始まる物語

神前暁
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君