Заменить <a>с React <Link>в тексте

Question

в своем приложении React я получаю некоторый HTML-код с другого сервера (Википедия) и - в этом тексте - хочу заменить все ссылки ссылками на реагирующий маршрутизатор.

Я пришел к выводу, чтоследующий код:

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

Answer 2

Вы не можете сделать <Link> таким образом.Вместо этого вы можете попробовать другой способ:

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

при нажатии на <a> вы маршрутизируете вручную.

См. Программная навигация с использованием реагирующего маршрутизатора