Skip to main content
2 de 9
adicionou 1088 caracteres ao conteúdo
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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 &#127821;"
  return (

    <div>
      <H2 texto={abacaxi}></H2>
      <H2 texto="Direto &#127821;"></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> &#127821;"
  return (

    <div>
      <H2 texto={abacaxi}></H2>
      <H2 texto="<strong>Direto</strong> &#127821;"></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>

Syzoth
  • 100,5mil
  • 23
  • 169
  • 361