危險地SetInnerHTML 和<Link>

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