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

问题描述

使用 html-react-parser，我需要将我的字符串输出为 JSX，但替换所有 <a href=...> 到封装的新元素 <LinkContainer to={href}><a>..</a></LinkContainer>，它将包含 <a>。换句话说，我将我的 A-link 包装在 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 标签本身
它的子节点，即内部文本，一个单独的节点

解决方法

我找到了解决方案。您只需替换 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>;
                }  
            }}
        )

html-react-parser reactjs reactjs reactjs reactjs