dangerouslySetInnerHTML和

Question

我的页面需要本地化。我使用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>']) }}
/>

Answer 1

我找到了解决办法是，你使用的<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, ''));
        }
    }
}