我的页面需要本地化。我使用gettext。我的i18n.__函数返回翻译后的字符串并%s用提供的参数替换符号。
据我所知，我不能“危险地设置”一个 JSX 元素，但是我需要插入开始和结束<Link>标签。我无法将字符串拆分为多个部分，因为后端为我提供了这样的信息。
我愿意接受任何想法。
这是我的div元素：
<div
dangerouslySetInnerHTML={{ __html: i18n.__('Feel free to %scontact us%s if you have found a bug.', ['<Link to="/info">', '</Link>']) }}
/>
我发现的解决方案是您使用<a>标签而不是<Link>标签并onClick在整个包装器上摆弄事件。它是这样的：
<div
onClick={(e) => {
this.navigate(e);
}}
>
...
<div
dangerouslySetInnerHTML={{ __html: i18n.__('Feel free to %scontact us%s if you have found a bug.', ['<a href="/info">', '</a>']) }}
/>
...
</div>
并且该navigate函数会检查您是否点击了<a>标签并阻止重定向event.preventDefault()。然后历史被“推”：
navigate(event) {
const siteUrl = "https://www.test.com";
if (event.target.tagName === 'A') {
const href = event.target.getAttribute('href');
if (href.indexOf('mailto:') === -1) {
event.preventDefault();
this.props.history.push(href.replace(siteUrl, ''));
}
}
}