javascript - 将文本中的 <a> 替换为 React <Link>

Question

在我的 React 应用程序中，我从另一台服务器 (Wikipedia) 获取一些 HTML，并且 - 在本文中 - 想要用 react-router 链接替换所有链接。

我想出的是下面的代码:

// 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
})

然后在 render() 中，我使用

将其插入到页面中

<div dangerouslySetInnerHTML={{__html: this.state.html}} />

问题是 React JSX 不是原生 JavaScript 元素，因此不能与 replaceWith 一起使用。我还假设这样一个 Link 对象不能存储为文本，然后使用 dangerouslySetInnerHTML 恢复。

那么:执行此方法的最佳方法是什么？我想保留链接周围的所有各种元素，这样我就不能简单地遍历 render()

中的链接

Answer 1

嗯，你真的需要使用 Link 选项 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);
});

选项 2:使用 html-react-parser