Como converter string HTML para JSX em React JS

Neste artigo você aprenderá a como converter string HTML para JSX, deixando o seu JSX baseado em um HTML que você consumiu

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Converter strings HTML para JSX em React JS pode parecer uma tarefa desafiadora, mas é um requisito comum em várias aplicações.

Seja ao importar conteúdo de um CMS ou ao lidar com strings formatadas, você muitas vezes terá que enfrentar este desafio.

Neste artigo, vamos abordar as melhores práticas para fazer essa conversão de forma eficiente e segura.

Entendendo a Diferença entre HTML e JSX

Antes de mergulhar nos métodos de conversão, é importante entender as principais diferenças entre HTML e JSX.

Embora semelhantes em estrutura, há sutilezas na forma como eles lidam com atributos e eventos. JSX é uma extensão de sintaxe para JavaScript que permite escrever elementos HTML de forma concisa.

No entanto, JSX é mais rigoroso e tem algumas diferenças de nomenclatura, como className em vez de class.

Por Que Não Usar dangerouslySetInnerHTML?

O atributo dangerouslySetInnerHTML permite inserir HTML diretamente no DOM. Embora pareça a solução mais direta, ela vem com riscos significativos de segurança, como ataques de Cross-site Scripting (XSS).

Além disso, o uso de dangerouslySetInnerHTML torna o componente menos “reativo”, pois ele não tira proveito das otimizações de desempenho do React.

// Exemplo não recomendado
function MeuComponente({ htmlString }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

Utilizando Bibliotecas Externas

Existem várias bibliotecas que facilitam a conversão segura de HTML para JSX, e uma das mais populares é a react-html-parser. Ela faz o trabalho pesado por você, transformando tags HTML em componentes React.

Como Instalar

Instale a biblioteca usando npm ou yarn:

npm install react-html-parser

Exemplo de Uso

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

const MeuComponente = () => {
  const minhaStringHtml = "<h1>Olá, mundo!</h1><p>Isto é um parágrafo.</p>";

  return <div>{ReactHtmlParser(minhaStringHtml)}</div>;
}

Convertendo Manualmente com Expressões Regulares

Se você não quiser usar bibliotecas externas, é possível usar expressões regulares para fazer a conversão.

Contudo, essa abordagem não é recomendada para strings HTML complexas, pois o manuseio de todas as variações e exceções de tags HTML pode se tornar complexo e propenso a erros.

function converteHtmlParaJSX(html) {
  let jsxString = html;
  
  // Converter 'class' para 'className'
  jsxString = jsxString.replace(/class="/g, 'className="');
  
  // Converter 'for' para 'htmlFor'
  jsxString = jsxString.replace(/for="/g, 'htmlFor="');
  
  // Outras conversões podem ser feitas aqui
  
  return jsxString;
}

Exemplo Prático com React JS

Vamos criar um exemplo em React que faz uso da biblioteca react-html-parser para converter HTML em JSX.

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

const MeuComponente = () => {
  const htmlString = '<h1>Seja Bem-vindo!</h1><p>Este é um exemplo.</p>';

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

Preocupações com Segurança

Independentemente do método escolhido, é crucial validar e limpar as strings HTML para evitar ataques de XSS.

Certifique-se de que o conteúdo que você está convertendo seja de uma fonte confiável ou utilize bibliotecas como DOMPurify para limpar o HTML antes da conversão.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Converter strings HTML para JSX é uma necessidade comum em aplicações React JS.

Embora existam várias formas de realizar essa conversão, o uso de bibliotecas especializadas como react-html-parser oferece uma abordagem eficiente e segura.

É importante considerar as implicações de segurança ao trabalhar com strings HTML, especialmente para prevenir vulnerabilidades como ataques de XSS.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.