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

今天依旧是日常维护业务代码，解决一处密码校验的相关功能。网络问题在 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 块钱。格瓦斯是我最不抱希望的饮料，打算优先尝试，结果发现就是液体面包，并不是很难喝。这是一款地方特色的饮料，好比是广东人的沙示，外地人有些喝不惯的会说是清凉油~

2022-08-29