Estoy pasando HTML precompilado a mi componente React a través de accesorios. Los datos originales se parecen a esto.
let pageData = [ title : 'About', content: '<p>Hello <strong> World!</p><a href="/contact">Contact</a>' ] Luego, en el componente que usa el método dangerouslySetInnerHTML SetInnerHTML porque no estoy seguro de si hay algo más que usar.
import React from 'react'; export default class PostText extends React.Component { render() { return ( <div dangerouslySetInnerHTML={{__html: this.props.content}} /> </div> ); } } Pero mi pregunta es, ¿cómo puedo convertir la <a href="/contact">Contact</a> a <Link to="/contact">Contact</Link> .
Incluso si no cambio la marca, ¿hay alguna manera de hacer algo como "cuando hago clic en una etiqueta <a> , el tratamiento es como etiqueta <Link> ".
Creo que podría hacer algo como esto, interceptar enlaces, hacer clic en eventos dentro de su div y navegar con el enrutador:
<div dangerouslySetInnerHTML={{__html: this.props.content}} onClick={event => this.navigate(event)} /> </div>y luego:
navigate (event) { event.preventDefault() if (event.target.tagName === 'A') { this.props.router.push(event.target.getAttribute('href')) } }