Как использовать ссылки React при рендеринге контента с помощью dangerousSetInnerHtml?
Итак, я разрабатываю страницу блога для приложения React. Страница загружает данные из CMS, а содержимое сообщения в блоге представляет собой необработанный HTML-код, который я визуализирую на странице с помощью:
<div dangerouslySetInnerHTML = {{__html: this.state.content}} />
Однако любые ссылки, которые я помещаю в пост, вроде
<a href='/'>Home Page</a> не использует реагирующий маршрутизатор и вместо этого запускает перезагрузку страницы.
Есть ли способ справиться с этим в реакции без необходимости анализировать HTML и заменять теги <a> на <Link>?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать обработчик кликов в контейнере HTML, чтобы перехватывать клики. Если щелчок исходит от тега <a> (или его дочернего элемента), вы можете запретить использование тега по умолчанию и использовать href.
В этом случае вы можете использовать withRouter реактивного маршрутизатора для получения объекта history и использовать метод push для уведомления маршрутизатора. Вы также можете редактировать URL-адрес или манипулировать им другими способами.
Пример (раскомментируйте и удалите консоль при использовании кода):
// import { withRouter } from 'react-router-dom'
class HTMLContent extends React.Component {
contentClickHandler = (e) => {
const targetLink = e.target.closest('a');
if (!targetLink) return;
e.preventDefault();
console.info(targetLink.href); // this.props.history.push(e.target.href)
};
render() {
return (
<div
onClick = {this.contentClickHandler}
dangerouslySetInnerHTML = {{__html: this.props.content}}
/>
);
}
}
// export default withRouter(HTMLContent);
const content = `<div>
<a href = "http://www.first-link.com">Link 1</a>
<a href = "http://www.second-link.com"><span>Link 2</span></a>
</div>`;
ReactDOM.render(
<HTMLContent content = {content} />,
demo
);<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id = "demo"></div>
Большое спасибо. Небольшой полезный совет: если вы предоставляете ссылку на относительный маршрут, например (/ something), вы можете получить ее через
this.props.history.push(e.target.getAttribute("href"));.