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
const parsed = 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 ou pode simplesmente obter o conteúdo com:
parsed.body.textContent
Dessa forma irá remover as tags HTML, mas irá manter as entidades HTML suportadas:
function H2({texto}){
texto = new DOMParser().parseFromString(texto, "text/html").body.textContent;
return(<h2>{texto}</h2>)
}
function App() {
const abacaxi ="<strong>Constante</strong> 🍍"
return (
<div>
<H2 texto={abacaxi}></H2>
<H2 texto="<strong>Direto</strong> 🍍"></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>