Pode até usar o dangerouslySetInnerHTML
, no entanto definir HTML a partir do código pode ser arriscado porque é fácil expor a ataques de script entre sites (XSS), por isso o nome dangerouslySetInnerHTML
e passar um objeto com uma chave __html
, que é aparentemente complicada, isso para se lembrar de que é perigoso. Por exemplo:
function H2({texto}){
console.log(texto);
return(<h2 dangerouslySetInnerHTML={{ __html: texto }}></h2>)
}
function App() {
const abacaxi ="Constante 🍍"
return (
<div>
<H2 texto={abacaxi}></H2>
<H2 texto="Direto 🍍"></H2>
</div>
);
}
ReactDOM.render(
<App></App>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
No entanto se você usar
new DOMParser().parseFromString(<seu conteudo html>, "text/html");
poderá fazer parse do HTML, remover todos atributos com prefixo on
, tags <script>
e diversos elementos desnecessários, seria melhor fazer uma lista de elementos permitidos.