Javascript 如何用react组件替换dom元素

发布于01月14日

我的富文本编辑器的输出是纯html.我使用div元素上的dangerouslySetInnerHtml来呈现它.然而，我的普通html在交互性方面相当有限.假设我有一个这样的 node

<a href="/users/userA"/ id="userA">

这是一个指向用户页面的简单链接.然而，我想要添加悬停卡功能到它.我有我的定制Reaction组件UserLink，它使用像RadixUI这样的外部库来实现这个悬停卡.在初始呈现后，有没有可能用我的定制组件替换这个简单的a标记？或者，还有什么方法可以做到这一点？

推荐答案

您可以使用诸如reaction-html-parser这样的库，它可以将一个HTML字符串转换为Reaction组件.它还允许用Reaction组件替换指定的元素.

下面是一个使用action-html-parser的示例:

import ReactHtmlParser, { convertNodeToElement } from 'react-html-parser';

function transform(node, index) {
  if (node.type === 'tag' && node.name === 'a') {
    return <UserLink key={index} href={node.attribs.href}>{node.children[0].data}</UserLink>;
  }
}

function MyComponent({ html }) {
  return <div>{ReactHtmlParser(html, { transform })}</div>;
}

在Transform函数中，带有href /users/userA的<a>标记将转换为<UserLink href="/users/userA">.

这样，您就可以用您自己的定制Reaction组件替换您的HTML字符串中的某些标记.UserLink组件可以根据您的要求进行定义，包括悬停功能或任何其他自定义行为.