dangerouslySetInnerHTML 和 <Link>

Question

我的页面需要本地化。我使用gettext。我的 i18n.__ 函数 returns 翻译字符串并用提供的参数替换 %s 符号。

据我所知，我不能 'dangerously set' JSX 元素，但是我需要插入开始和结束 <Link> 标签。我无法将字符串拆分成多个部分，因为后端提供了这样的功能。

我愿意接受任何想法。

这是我的 div 元素：

<div                                
    dangerouslySetInnerHTML={{ __html: i18n.__('Feel free to %scontact us%s if you have found a bug.', ['<Link to="/info">', '</Link>']) }}
/>

Answer 1

我找到的解决方案是您使用 <a> 标签而不是 <Link> 标签，并在整个包装器上使用 fiddle 和 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() 的重定向。那么历史就是"pushed":

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, ''));
        }
    }
}

dangerouslySetInnerHTML 和 <Link>

dangerouslySetInnerHTML and <Link>

javascript

gettext

reactjs