Neste artigo você aprenderá a como renderizar HTML puro em React, ou seja, como mostrar código HTML pelo JSX
Fala programador(a), bora aprender mais sobre React JS!
O React JS é amplamente reconhecido por sua capacidade de criar interfaces de usuário dinâmicas e interativas.
Mas, em algumas situações, pode ser necessário renderizar HTML puro dentro de um componente.
Tal tarefa, embora simples, requer alguns cuidados especiais para garantir a segurança e a eficiência do aplicativo.
Introdução: O JSX e o HTML
Ao trabalhar com React, geralmente escrevemos JSX – uma extensão de sintaxe para JavaScript que permite escrever estruturas que se parecem com HTML.
Contudo, o JSX não é HTML. Ele é transformado em chamadas de função JavaScript que criam elementos do DOM virtual.
Então, quando queremos inserir HTML puro em um componente React, não estamos apenas colocando uma string – há mais etapas envolvidas.
A prop dangerouslySetInnerHTML
O React oferece uma propriedade chamada dangerouslySetInnerHTML que permite inserir HTML diretamente dentro de um elemento.
O nome “perigoso” é intencional, alertando os desenvolvedores sobre os riscos de segurança associados à renderização direta do HTML.
Exemplo Básico:
function ComponenteHTMLPuro() {
const htmlString = '<p>Este é um parágrafo em HTML puro.</p>';
return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}
Cuidados com a Segurança
Ao utilizar dangerouslySetInnerHTML, é essencial garantir que o conteúdo que você está renderizando seja seguro e livre de scripts maliciosos.
Se você estiver renderizando conteúdo que vem de fontes externas ou usuários, pode ser vulnerável a ataques de cross-site scripting (XSS).
Sempre limpe e sanitize o HTML antes de renderizá-lo para evitar tais riscos.
Quando usar o dangerouslySetInnerHTML?
Há algumas situações em que a renderização de HTML puro pode ser necessária:
- Conteúdo gerado por terceiros: Como artigos de um CMS que retornam conteúdo em HTML.
- Integração com bibliotecas que retornam HTML: Por exemplo, conversores de Markdown para HTML.
- Migração de projetos antigos: Em casos onde um projeto antigo em HTML está sendo migrado para React, e reescrever todo o conteúdo seria impraticável.
Alternativas ao dangerouslySetInnerHTML
Se a necessidade for apenas para estilizar ou aplicar pequenas marcações, pode ser mais adequado usar JSX diretamente ou bibliotecas específicas que convertam formatos específicos (como Markdown) para JSX.
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Renderizar HTML puro em React, embora possível, deve ser feito com cautela. A flexibilidade do React permite essa operação, mas os desenvolvedores devem estar cientes dos riscos associados.
Utilize dangerouslySetInnerHTML de maneira consciente, sempre priorizando a segurança do seu aplicativo.
O React oferece poderosas ferramentas para criar aplicações interativas e dinâmicas, mas, como toda ferramenta, requer um uso informado para garantir que suas soluções sejam tanto eficientes quanto seguras.
Ao entender as nuances e particularidades de recursos como dangerouslySetInnerHTML, desenvolvedores podem garantir uma experiência otimizada para seus usuários finais.
Está buscando evoluir como Programador? Confira o nossos cursos de programação.