ReactJS 取数据 html 数据处理

Question

我有一个 mongodb 数据库，我在其中保存了原始 html。 我在 html 中创建了一个名为 kk-id 的自定义属性，以提及 html 中的对象。 我想用锚标签替换那个特定的 html 标签。

我想出了一种使用香草 javascript的方法，但是我想知道是否有更有效的reactjs方法来做到这一点。

数据示例

<p>Hello <span kk-id="123">John Doe</span></p>

John Doe 的 id 是123保存在其中。

/// react component
import React, { useEffect, useState } from "react";

export default function TestComponent() {
  const [html, setHtml] = useState(
    `<p>Hello <span kk-id="123">John Doe</span><br /></p>`
  );

  useEffect(() => {
    const span = document.querySelector(`[kk-id]`);
    if (span) {
      const a = document.createElement("a");
      a.href = "/people/john-doe";
      a.innerText = span.innerText;
      span.parentNode.replaceChild(a, span);
    }
  }, [html]);

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Answer 1

我希望 vanilla js 是最简单的方法。 出于增强目的，您可以看到这个。 它将更具可读性和可重用性。

Answer 2

您可以使用html-react-parser并执行

import parse from "html-react-parser";
...

const newParsedHtml = parse(html, {
    replace: ({attribs}) => {
        if (domNode.attribs && domNode.attribs.id === "123") {
            return <span>dynamic text here</span>
        }
    }
});