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

【问题标题】：html-react-parser: Replace DOM Node with another DOM Node containing inner text child (A-link)html-react-parser：将 DOM 节点替换为另一个包含内部文本子节点的 DOM 节点（A-link）
【发布时间】：2021-07-23 18:55:30
【问题描述】：

使用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 标签本身
它的子节点，即内部文本，一个单独的节点

【问题讨论】：

标签： reactjs html-react-parser

【解决方案1】：

我找到了解决方案。您只需替换 A 标记并从 domNode.children[0].data 获取链接文本。

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

【讨论】：