javascript - 使用 i18next 将变量替换为 ReactNode 元素
问题描述
我有一个带有以下翻译的翻译 json 文件:
"pageNotFound": {
"description": "The page could not be found. Click {{link}} to return to the home page"
},
我想要替换的链接变量ReactRouter <Link>
我的render
方法中有以下代码,它输出下图。
public render() {
const { t } = this.props;
const message = t('pageNotFound.description', { link: <Link to="/">here</Link> });
return (
<div className="body-content">
<div>
{message}
</div>
</div>
);
}
我玩过这个<Trans>
组件,我认为这可能是一种方式,但似乎你必须输入包括 <> 标签在内的全文,对于我的用例来说,这不是我想要的,因为我希望所有文本都在如果可能的话,翻译 json。
欢迎任何建议
解决方案
您应该Trans
为此使用组件。
"pageNotFound": {
"description": "The page could not be found. Click <0>here</0> to return to the home page"
},
public render() {
const { t } = this.props;
return (
<div className="body-content">
<div>
<Trans
t={t}
i18nKey="pageNotFound.description"
components={[
<Link key={0} to="/">
here
</Link>,
]}
/>
</div>
</div>
);
}
推荐阅读
- node.js - 从 docker 容器和节点使用 websocket 的问题
- oracle - 选择查询的自定义异常处理
- php - Laravel 登录页面重定向到验证页面
- html - 当显示一个包含一个单元格的简单表格时,表格显示的大小大约是它应该显示的大小的两倍
- reactjs - 我应该什么时候创建一个新的 React 组件?
- python - 摩根指纹rdkit
- visual-studio - 在 Visual Studio 中更新 Nuget 包后构建定义未构建
- javascript - 如何从数组中提取对象?
- javascript - JavaScript 表格在加载/刷新时闪烁。想知道我怎样才能避免这种情况发生?
- r - 如何在r中的nnfor包中获得mlp层神经元的权重?