html-react-parser：将 DOM 节点替换为另一个 DOM 包含内部文本子节点的节点 (A-link)

Question

使用html-react-parser，我需要将我的字符串输出为 JSX，但替换所有 <a href=...> 封装新元素 <LinkContainer to={href}><a>..</a></LinkContainer>，它将包含 <a>。换句话说，我将我的 A 链接包装在 LinkContainer 标签中。

问题是，我不知道如何表达我要替换的A-tag的Inner Text，必须包含：

parse(successMessage, { 
        replace: domNode => {
            if (domNode.attribs && domNode.attribs.href) {
                return <LinkContainer to={domNode.attribs.href}><a href="#">How to get the Inner Text?</a></LinkContainer>;
            }  
        }}
    );

没有 innerText 或 text 之类的可用内容。到我这里来的DOM个节点是

A 标签本身
它的子节点，也就是内部文本，一个单独的节点

Answer 1

我找到了解决方案。您可以只替换 A 标签并从 domNode.children[0].data.

获取 link 的文本

    parse(successMessage, { 
            replace: domNode => {
                if (domNode.attribs && domNode.attribs.href) {
                    return <LinkContainer to={domNode.attribs.href}><a href="#">{domNode.children[0].data}</a></LinkContainer>;
                }  
            }}
        )

html-react-parser：将 DOM 节点替换为另一个 DOM 包含内部文本子节点的节点 (A-link)

html-react-parser: Replace DOM Node with another DOM Node containing inner text child (A-link)

reactjs

html-react-parser