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 块钱。格瓦斯是我最不抱希望的饮料,打算优先尝试,结果发现就是液体面包,并不是很难喝。这是一款地方特色的饮料,好比是广东人的沙示,外地人有些喝不惯的会说是清凉油~

配乐 多云 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君