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

您可以使用regex从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)匹配数组中html字符串中的每个<li>...</li>，然后映射该数组。然后，我使用捕获(括号内的部分)从每个<li>...</li>中提取标题、href等，然后可以在JSX中使用。This answer提供了关于所使用的正则表达式的更多细节。