0

Bom dia. Estou pegando uma resposta recebida por uma API na minha aplicação React, no entanto, tal resposta é uma array contendo string's com elementos html:

0
"<p>This Emmy winning series is a comic look at the assorted humiliations and rare triumphs of a group of girls in their 20s.</p>"
1
"<p><b>Good Girls</b> follows three \"good girl\" suburban wives and mothers who suddenly find themselves in desperate circumstances and decide to stop playing it safe, and risk everything to take their power back.</p>"
2
"<p>The city of Townsville may be a beautiful, bustling metropolis, but don't be fooled! There's evil afoot! And only three things can keep the bad guys at bay: Blossom, Bubbles and Buttercup, three super-powered little girls, known to their fans (and villains everywhere) as <b>The Powerpuff Girls</b>. Juggling school, bedtimes, and beating up giant monsters may be daunting, but together the Powerpuff Girls are up to the task. Battling a who's who of evil, they show what it really means to \"fight..."
3
"<p>Imagine a night in with four girls. Now imagine doing that for four years. In a building full of girls that is a Girl's Hostel. Live the Dushmani, the Dosti, the Pyaar, the Bhasad.</p>"

Se eu usar o método map para escrever tais textos na minha tela, os elementos também aparecerão, logo, pensei em usar o querido innerHTML, mas estou no JSX. O que eu tenho que fazer para resolver isso?

OBS: Já tentei usar o dangerouslySetInnerHTML mas não funcionou.

3 Respostas 3

-1

Como você está usando o dangerouslySetInnerHTML? Tem uma sintaxe específica pra passar essa prop. Olha esse exemplo:

import React from "react";
import "./styles.css";

const list = [
  '<p>This Emmy winning series is a comic look at the assorted humiliations and rare triumphs of a group of girls in their 20s.</p>',
  '<p><b>Good Girls</b> follows three "good girl" suburban wives and mothers who suddenly find themselves in desperate circumstances and decide to stop playing it safe, and risk everything to take their power back.</p>'
];

const getItems = () => new Promise((resolve) => setTimeout(() => resolve(list), 1000));

export default function App() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    getItems().then((result) => setItems(result));
  }, []);

  if (!items.length) {
    return 'Loading...';
  }

  return (
    <div className="App">
      <ul>
        {items.map((item) => (
          <li dangerouslySetInnerHTML={{ __html: item }} />
        ))}
      </ul>
    </div>
  );
}

No CodeSandbox: https://codesandbox.io/s/sweet-lewin-dwqr0

1
  • Deu certo. Muito obrigado! Commented 6/02/2020 às 16:30
-1

Você pode instalar uma biblioteca, mas o que ele vai fazer é facilitar a utilização do dangerouslySetInnerHTML

react-inner-html

npm i -S react-inner-html

Exemplo:

import html from 'react-inner-html';

function MyComponent() {
  return <div {...html('my <b>hot</b> html')} />;
}

Caso você queira utilizar o "dangerouslySetInnerHTML", aqui tem um exemplo para você dar uma olhada

https://codepen.io/jamesnimlos/pen/VKAaJO

Aqui tem o componente:

class Dynamic extends React.Component {
    markup (val) {
        return { __html: val }
    }

    render () {
        return <div dangerouslySetInnerHTML={this.markup(this.props.html)} />;
    }

    componentDidMount () {
        const node = document.querySelectorAll('#edit-me')[0];
        setTimeout(() => {
            node.innerHTML = `<span style="color:red;">This has been changed</span>`;
            this.props.updated();
        }, 2000);
    }
}
1
  • Tentei usar o react-inner-html e deu mais ou menos certo, os textos aparecem na tela, mas parece que eles ficam em um looping de carregamento. Commented 6/02/2020 às 14:20
-3

Você pode usar o useLayoutEffect para escrever o innerHTML uma vez que ele já foi renderizado.

Exemplo:

const DivWithInnerHTML = () => {
     
     const refId = useRef(null);
     const code = `Este é um <b>teste</b>`
 
     // Após a renderização, o conteúdo do div é trocado
     useLayoutEffect(() => {
        refId.current.innerHTML = code
     },[])

     // Retorna o elemento com o innerHTML
     return <div ref={refId}>Conteudo antigo</div>

}

Nota: o dangerouslySetInnerHTML sanitariza todo o código JS que possa conter no innerhtml. No método o useLayoutEffect não é realizado essa sanitização.

Caso não queira usar o useRef, você pode tentar a abordagem do JS direta também, atribuindo um ID pro div e capturando via document.getElementById.

Não esqueça de importar o useRef e o useLayoutEffect.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .