[英]Using i18next to replace a variable with a ReactNode element
I have a translation json file with the following translation:我有一个翻译 json 文件,翻译如下:
"pageNotFound": {
"description": "The page could not be found. Click {{link}} to return to the home page"
},
The link variable I am wanting to be replaced by a ReactRouter <Link>
我想用ReactRouter <Link>
替换链接变量
I have the following code in my render
method which outputs the below picture.我的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>
);
}
I have played with the <Trans>
component and I think this may be a way but it seems like you have to type the full text including <> tags which for my use case is not what i'm after as I want all text to be in the translation json if possible.我玩过<Trans>
组件,我认为这可能是一种方式,但似乎您必须输入包括 <> 标签在内的全文,对于我的用例而言,这不是我想要的,因为我希望所有文本如果可能的话,在翻译 json 中。
Any recommendations are welcome欢迎任何建议
You should use Trans
component for this.您应该为此使用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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.