I am passing pre-compiled HTML to my React component through props. The original data looks something like this.
let pageData = [
title : 'About',
content: '<p>Hello <strong> World!</p><a href="/contact">Contact</a>'
]
Then in the component using the dangerouslySetInnerHTML method because I'm not sure if there is anything else to use.
import React from 'react';
export default class PostText extends React.Component {
render() {
return (
<div
dangerouslySetInnerHTML={{__html: this.props.content}}
/>
</div>
);
}
}
But my question is, how can I convert the <a href="/contact">Contact</a> tag to <Link to="/contact">Contact</Link>.
Even if I don't change the mark up, is there a way to to do something like, "when I click an <a> tag, treat is as <Link> tag".
I think you could do something like this, intercepting links click events inside you div and navigating with router:
<div
dangerouslySetInnerHTML={{__html: this.props.content}}
onClick={event => this.navigate(event)}
/>
</div>
and then:
navigate (event) {
event.preventDefault()
if (event.target.tagName === 'A') {
this.props.router.push(event.target.getAttribute('href'))
}
}