javascript - JSX 组件 + dangerouslySetInnerHTML？

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 就可以了。

但是，围绕 html 中的 a href 标签，我需要像这样将它们包装在组件中:

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

这是因为当包装 a 标签时，该组件实际上添加了创建新子窗口的功能。

我认为这是您需要在 Regex 上实现的东西，但我完全不知道从哪里开始。

Answer 1

您可以使用正则表达式从 html 字符串中解构和提取必要的值，然后使用 JSX 而不是 dangerouslySetInnerHtml。该组件展示了如何呈现您的示例 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 中使用。 This answer提供有关所用正则表达式的更多详细信息。