Renderizando cadena HTML en React

Renderizando cadena HTML en React

En este tutorial, aprenderemos cómo representar una cadena html como elementos dom reales en la aplicación React.

Si intentamos usar la sintaxis de llaves JSX { } para representar una cadena html, reaccionar la tratará como texto sin formato (para evitar ataques de secuencias de comandos entre sitios).

Aplicación.js

import React from "react";

export default function App() {
  const htmlString = "<h1>Hello World</h1>";
  return <div>{htmlString}</div>;
}

renderizar HTML

Para representar la cadena html en reaccionar, podemos usar el dangerouslySetInnerHTML atributo que es una versión reactiva de dom innerHTML propiedad.

Ejemplo:

Aplicación.js

import React from "react";

export default function App() {
  const htmlString = "<h1>Hello World</h1>";
  return <div dangerouslySetInnerHTML={{ __html: htmlString }}>         </div>;
}

El término dangerously se utiliza aquí para advertirle que será vulnerable a los ataques de secuencias de comandos entre sitios (XSS).

Del mismo modo, también puede utilizar el html-react-parser biblioteca para representar la cadena html.

Aplicación.js

import React from "react";
import parse from "html-react-parser";
export default function App() {
  const htmlString = "<h1>Hello World</h1>";

  return <div>{parse(htmlString)}</div>;}

Si quieres conocer otros artículos parecidos a Renderizando cadena HTML en React puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas