Javascript 替换<；a>；用React<；链接>；正文

在我的React应用程序中，我从另一台服务器（Wikipedia）获取了一些HTML，在本文中，我想用React路由器链接替换所有链接

我想到的是以下代码：

// Parse HTML with JavaScript DOM Parser
let parser = new DOMParser();
let el = parser.parseFromString('<div>' + html + '</div>', 'text/html');

// Replace links with react-router links
el.querySelectorAll('a').forEach(a => {
  let to = a.getAttribute('href');
  let text = a.innerText;
  let link = <Link to={to}>{text}</Link>;
  a.replaceWith(link);
});
this.setState({
  html: el.innerHTML
})

问题是React JSX不是本机JavaScript元素，因此不能使用

replaceWith

。我还假设这样一个

链接

对象不能存储为文本，然后使用

危险的HTML

还原

那么：采用这种方法的最佳方法是什么？我想保留链接周围的所有元素，这样我就不能在

render（）

中简单地循环链接了。您不能这样渲染

。 相反，您可以尝试另一种方法：

el.querySelectorAll('a').forEach((a) => {
    a.addEventListener('click', (event) => {
       event.preventDefault()
       const href = a.getAttribute('href');
       // use React Router to link manually to href
    })
})

---

当点击

嗯，你真的需要使用
链接
备选案文1：

import { renderToString } from 'react-dom/server';
el.querySelectorAll('a').forEach(a => {
  let to = a.getAttribute('href');
  let text = a.innerText;
  const link = renderToString(<Link to={to}>{text}</Link>);
  a.replaceWith(link);
});

从'react dom/server'导入{renderToString}；
el.querySelectorAll（'a'）.forEach（a=>{
let to=a.getAttribute（'href'）；
让text=a.innerText；
const link=renderToString（{text}）；
a、 替换为（链接）；
});

选项2：使用
html反应解析器
您可以利用

import parse，{domToReact}来自'html react parser'；
从'react router dom'导入{Link}；
函数parseWithLinks（文本）{
常量选项={
替换：（{name，attribs，children}）=>{
if（name=='a'&&attribs.href）{
返回{DOMTREACT（儿童）}；
}
}
};
返回解析（文本、选项）；
}

然后像这样使用它：

const textWithRouterLinks = parseWithLinks('<a href="/home">Home page</a>');

const textWithRouterLinks=parseWithLinks（“”）；
您可以创建利用历史API的链接，以便“以编程方式”影响react路由器，就像您希望javascript的任何部分在不使用
智能移动的情况下更改页面一样。比Parsing好得多这真的有效吗？由于renderToString是为在服务器上使用而设计的，因此在使用此选项时，可能无法为
链接
组件正确设置相关的onClick处理程序等
import parse, { domToReact } from 'html-react-parser';
import { Link } from 'react-router-dom';    

function parseWithLinks(text) {
  const options = {
    replace: ({ name, attribs, children }) => {
      if (name === 'a' && attribs.href) {
        return <Link to={attribs.href}>{domToReact(children)}</Link>;
      }
    }
  };
      
  return parse(text, options);
}

const textWithRouterLinks = parseWithLinks('<a href="/home">Home page</a>');