4

Recentemente fiz perguntas que envolviam código em React e o console.log realizava o log no console do navegador, e não do Snippet, mesmo com a checkbox "Mostrar console" marcada.

Isso é um problema do próprio Snippet (algum tipo de conflito com os scripts do React) ou eu acabei formatando algo errado?

Exemplo breve:

function Exemplo() {
  console.log("Um log que deveria aparecer no Snippet");

  return <div></div>
}

ReactDOM.render(<Exemplo /> , document.body);
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

0

1 Resposta 1

4

Basicamente o que acontece é que o conteúdo padrão do body do Snippet é esse:

<div class="as-console-wrapper">
  <div class="as-console"></div>
</div>

Ou seja, existem div's responsáveis por exibir as mensagens do console.

Ao utilizar ReactDOM.render(<Exemplo /> , document.body);, o React substitui tudo o que há no document.body, removendo as div's mencionadas acima.

Para resolver, basta criar um elemento no HTML do Snippet e então renderizar o componente nesse elemento:

function Exemplo() {
  console.log("Um log que aparece no Snippet");

  return <div></div>
}

ReactDOM.render(<Exemplo />, document.querySelector("#container"));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

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 .