Tengo un componente que renderiza un título y una descripción que recibe por props
.
La descripción, la estoy componiendo en el componente padre a partir de varios datos, por lo que tiene texto, y algunas etiquetas HTML, como br
, strong
, ... Es algo como:
const description = 'Esto es una <strong>descripción</strong>'
+ '<br>'
+ 'que he añadido.'
Envió este contenido al hijo por props:
const description = 'Esto es una <strong>descripción</strong>'
+ '<br>'
+ 'que he añadido.'
return (
<div className="este-es-el-componente-padre">
<h3>Añado contenido</h3>
<ComponenteHijo title="Esto es un título" description={description} />
</div>
);
El ComponenteHijo
original recibe texto plano para la descripción:
return (
<div className="este-es-el-componente-hijo">
<h4>{props.title}</h4>
<p>{props.description}</p>
</div>
)
Al pasar etiquetas HTML se pintan junto con el texto:
Esto es un título
Esto es una <strong>descripción</strong><br>que he añadido.
Entonces, he tenido que modificar ComponenteHijo
con dangerouslySetInnerHTML para que la descripción se renderice correctamente:
return (
<div className="este-es-el-componente-hijo">
<h4>{props.title}</h4>
<p dangerouslySetInnerHTML={{ __html: props.description }} />
</div>
)
¿Existe otra forma de hacer esto sin tener que hacer modificaciones en el componente que va a recibir el texto con tags HTML?