JSX 组件 + 危险的SetInnerHTML？

Question

所以我在实现这个场景时遇到了麻烦：

从后端服务器，我收到一个 html 字符串，如下所示：

<ul><li><strong>Title1</strong> <br/> <a class=\"title1" href="title1-link">Title 1</a></li><li><strong>Title2</strong> <a class="title2" href="/title2-link">Title 2</a>

通常，仅使用dangerouslySetInnerHTML.

但是，围绕a hrefhtml 中的标签，我需要将它们包装在组件中，如下所示：

<ModalLink href={'title'}>
    {Title}
</ModalLink>

这是因为在包装a标签时，组件本质上添加了创建新子窗口的功能。

我想这是你需要在 Regex 上实现的东西，但我不知道从哪里开始。

Answer 1

您可以使用正则表达式从 html 字符串中解构并提取必要的值，然后使用 JSX 而不是angerlySetInnerHtml。该组件展示了如何呈现示例 html 字符串。

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        const html = `<ul><li><strong>Title1</strong><br/><a class="title1" href="/title1-link">Title 1</a></li><li><strong>Title2</strong><br/><a class="title2" href="/title2-link">Title 2</a></li></ul>`

        return (
            <div>
                <ul>
                {html.match(/(<li>.*?<\/li>)/g).map( li => {
                    const title =  li.match(/<strong>(.*?)<\/strong>/)[1]
                    const aTag = li.match(/<a.*?\/a>/)[0]
                    const aClass = aTag.match(/class="(.*?)"/)[1]
                    const href = aTag.match(/href="(.*?)"/)[1]
                    const aText = aTag.match(/>(.*?)</)[1]
                    return (
                        <li>
                            <strong>{title}</strong>
                            <br/>
                            <a className={aClass} href={href}>{aText}</a>
                        </li>
                    )
                })}
                </ul>
            </div>
        )
    }
}

从那里您可以简单地将 a 标签包装在您的 ModalLink 组件中。我不确定这是否正是您想要的方式，但这是一个示例。

return ( 
    <li>
        <strong>{title}</strong>
        <br/>
        <ModalLink href={href}>
            <a className={aClass} href={href}>{aText}</a>
        </ModalLink>
    </li>
)

html.match(/(<li>.*?<\/li>)/g)匹配<li>...</li>数组中 html 字符串中的每个内容，然后可以对其进行映射。<li>...</li>然后，我使用捕获（括号内的部分）从每个内容中提取标题、href 等，然后可以在 JSX 中使用它们。这个答案提供了有关所使用的正则表达式的更多详细信息。