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 }} />;
}

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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.

Seu HTML é fixo ou vem de fora? A resposta muda tudo

Essa é a pergunta que eu faria antes de escolher qualquer solução

Se o HTML é FIXO (tu copiou de um template, de um layout pronto, de um snippet), a conversão acontece uma vez só e o resultado vira código JSX de verdade dentro do teu componente

Aí tu ganha tudo: props, condicional, map, evento, o React enxergando cada elemento

Agora, se o HTML é DINÂMICO (vem de um CMS, de uma API, do banco), não tem como escrever o JSX na mão, porque aquele conteúdo só existe em tempo de execução

Nesse caso a conversão roda junto com a aplicação, e é aqui que entram as bibliotecas de parse e toda a conversa sobre segurança

Percebe que são dois problemas diferentes com o mesmo nome? Boa parte da confusão nasce exatamente aí

O que muda de HTML para JSX na prática:

O post cita o className, mas a lista completa é o que realmente te salva na hora da conversão

• class vira className
• o for do label vira htmlFor
• eventos viram camelCase: onclick vira onClick, onchange vira onChange
• atributos compostos também: tabindex vira tabIndex, readonly vira readOnly, e por aí vai
• style deixa de ser texto e vira objeto: style="color: red" vira style={{ color: 'red' }}
• toda tag precisa fechar: <br> vira <br />, <img> vira <img />
• comentário <!-- assim --> não existe no JSX, é {/ assim /}

Guardou essa lista? Ela é o coração de qualquer conversão, seja na mão ou por biblioteca 🙂

Então o dangerouslySetInnerHTML nunca serve?

Sendo honesto: serve sim, em caso específico

Se o HTML é gerado por tu mesmo, sai do teu backend, já vem limpo e tu só quer jogar na tela sem interagir com aquele conteúdo, ele resolve numa linha

O problema não é a existência dele, é o uso no automático em conteúdo que veio de fora

Duas coisas tu perde ao ir por esse caminho: o React não trata aquilo como elementos (então esquece trocar uma tag por componente teu ou plugar um evento) e qualquer coisa que entrar naquela string entra direto no teu DOM

A régua que eu uso é simples: se a origem do HTML não é 100% tua, ou sanitiza antes, ou parte pro parse

Antes de instalar a biblioteca, cheque isso:

Post sobre biblioteca envelhece rápido, e esse é o ponto que mais dá dor de cabeça

Antes de rodar o install, abre o repositório da lib e olha três coisas

1. Ela ainda recebe commit? Biblioteca de parse encosta em detalhe interno do React, então projeto parado costuma virar erro na hora de atualizar
2. Ela diz com qual versão do React funciona? Se o README não fala nada, dá uma passada nas issues abertas, o pessoal reclama rapidinho quando quebra
3. Ela sanitiza ou só converte? Muita lib faz só o parse, e aí a limpeza do HTML continua sendo tarefa tua

Tome cuidado: instalar primeiro e descobrir depois que a lib não sobe com a versão do React do teu projeto é o clássico que faz perder a tarde 😅

Por que a regex quebra (e como perceber):

A troca de class e for funciona num HTML simples, e é justamente isso que engana

Repara no que aquele replace NÃO cobre

• style="color: red" continua sendo texto, e o JSX espera um objeto
• <br>, <img> e <input> sem fechar seguem derrubando a conversão
• atributo booleano tipo checked ou disabled, escrito sem valor, passa batido
• o replace é cego: ele troca em qualquer ponto da string, inclusive dentro do texto visível e de trecho de código que tu queria mostrar na página
• comentário HTML sobrevive e vira lixo na tela

E tem o detalhe que mata: string não é árvore

Regex não entende aninhamento, então uma tag mal fechada no meio do conteúdo dá resultado imprevisível, e o erro aparece longe do lugar onde nasceu

Por isso a régua é: regex serve pra ajustar um HTML curto que tu conhece, não pra conteúdo que tu não escreveu

Onde sanitizar: no servidor ou no componente?

Essa decisão costuma ser tomada no piloto automático, e ela pesa

Sanitizar no componente é o mais fácil de implementar e cobre o caso do conteúdo chegar de vários lugares diferentes

Porém roda toda vez que o componente renderiza, e se o mesmo conteúdo aparece em várias telas tu paga a limpeza várias vezes

Sanitizar na ENTRADA (na hora que o conteúdo é salvo, ou no backend que serve a API) resolve na origem: o que está guardado já está limpo e todo consumidor herda isso, inclusive o app que ainda nem existe

O caminho que costuma dar menos problema é limpar na entrada e tratar o componente como última linha de defesa, nunca como única

Perguntas rápidas sobre HTML para JSX

Por que meu HTML aparece como texto na tela?

Porque o React escapa string por padrão

Quando tu faz {minhaStringHtml}, ele mostra as tags literalmente, e isso é proteção, não bug

Pra virar elemento de verdade, ou tu converte a string em JSX, ou usa uma lib de parse, ou assume o caminho do innerHTML com sanitização

Dá pra converter HTML em JSX sem instalar nada?

Dá, quando o HTML é fixo: tu ajusta os atributos na mão pela lista lá de cima e cola direto no componente

Pra conteúdo dinâmico, sem lib tu cai no innerHTML, e aí a sanitização deixa de ser opcional

E as tags <script> que vierem na string?

Não conta com elas rodando

Script inserido dessa forma não executa como tu espera, e se executasse seria exatamente o buraco de XSS que tu está tentando fechar