0

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?

2 respuestas 2

1

Una alternativa posible es utilizar la utilidad React HTML Parser. La misma puede ser instalada con npm:

npm install react-html-parser

Luego invocas ReactHtmlParser() dentro del componente pasando la cadena de texto que contiene etiquetas HTML como argumento:

import React from "react";
import ReactHtmlParser from "react-html-parser";

const description = `Esto es una <strong>descripción</strong>
<br>que he añadido`;

export default function App() {
  return (
    <div className="padre">
      <Hijo title="Titulo" description={description} />
    </div>
  );
}

const Hijo = props => {
  return (
    <div className="hijo">
      <h4>{props.title}</h4>
      <p>{ReactHtmlParser(props.description)}</p>
    </div>
  );
};

El uso de template strings es recomendable ya que no tienes que usar + para concatenar cadenas de texto.

Ejemplo aquí

3
  • Esto no es exactamente lo que buscaba, pero es una buena alternativa al uso de dangerouslySetInnerHTML que puede presentar problemas de seguridad. Sólo un apunte: mejor instalar localmente: npm install react-html-parser --save. Y si usas Typescript hay que añadir además los tipos de la librería: npm install @types/react-html-parser --save
    – Orici
    Commented el 11 may. 2020 a las 8:35
  • 1
    npm install ya no no necesita que le pases --save, automáticamente instala el paquete como dependencia del proyecto desde la versión 5.0.0 en adelante.
    – Juan Marco
    Commented el 11 may. 2020 a las 11:53
  • @Juan_Marco bueno es saberlo
    – Orici
    Commented el 11 may. 2020 a las 14:32
0

Podrias hacer esto, para que no pases una cadena de texto, sino jxs.

const description = <div>Esto es una <strong>descripción</strong><br/> que he añadido</div>

Con esta opcion se agregaria el div, pero si no quieres el div, ya que es algo inecesario para tu caso, podrias usar Fragment

const description = <React.Fragment>Esto es una <strong>descripción</strong><br/> que he añadido</React.Fragment>
1
  • Tu solución responde a mi pregunta, puedo pasar texto y HTML por props sin modificar el componente que lo recibe. Un saludo.
    – Orici
    Commented el 11 may. 2020 a las 8:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.