angerlySetInnerHTML 和

我的页面需要本地化。我用的是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>

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