Esiste console.log in JSX?

Esiste console.log in JSX?

Guardando parecchi appunti, ho visto spesso provare questo: 

render() {
 return (
 <div>
 <h1>List of todos</h1>
 console.log(this.props.todos)
 </div>
 );
}

Ciò non stamperà l'elenco previsto nella console. Restituirà semplicemente la stringa console.log (this.props.todos) nel browser.

Diamo prima un'occhiata ad alcune soluzioni che sono molto semplici, quindi spiegheremo il motivo.

La soluzione più utilizzata:

Incorpora l'espressione nel tuo JSX:

render() {
 return (
 <div>
 <h1>List of todos</h1>
 { console.log(this.props.todos) }
 </div>
 );
}

Un'altra soluzione popolare:

Metti il ​​tuo console.logprima del return():

render() {
  console.log(this.props.todos);
  return (
    <div>
      <h1>List of todos</h1>
    </div>
  );
}

Una soluzione elegante:

Divertiti scrivendo e usando il tuo componente <ConsoleLog>:

const ConsoleLog = ({ children }) => {
 console.log(children);
 return false;
};

Quindi usalo:

render() {
 return (
 <div>
 <h1>List of todos</h1>
 <ConsoleLog>{ this.props.todos }</ConsoleLog>
 </div>
 );
}

Perchè è così?

Dobbiamo ricordare che JSX non è JavaScript, né HTML. È un'estensione di sintassi.

Solo alla fine, JSX viene compilato in JavaScript.

Ad esempio, se scriviamo il seguente JSX:

const element = (
 <h1 className="greeting">
 Hello, world!
 </h1>
);

Verrà compilato in:

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

Rivediamo i parametri di React.createElement:

  • 'h1' : Questo è il nome del tag, come una stringa

Esaminiamo ora il console.log in errore che abbiamo provato a scrivere all'inizio di questo articolo:

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

Questo verrebbe compilato in:

// quando viene passato più di 1 oggetto, viene convertito in un array React.createElement ( 
  'div', 
  {}, // non vengono passati oggetti di scena / 
  [ 
    React.createElement ( 
      'h1', 
      {}, // no props qui o 
      'List of todos', 
    ), 
    'console.log (this.props.todos)' 
  ] 
);

Guarda come console.logviene passato come stringa a createElementNon viene eseguito.

Ha senso, sopra abbiamo il titolo List of todosCome può il computer sapere quale testo deve essere eseguito e qual è qualcosa che vuoi rendere?

Risposta : considera entrambi come una stringa. Considera SEMPRE il testo come una stringa.

Quindi, se si desidera che venga eseguito, è necessario specificare a JSX di farlo. Incorporandolo come espressione con {}.

E il gioco è fatto! Ora sai dove, quando e come console.logpuò essere utilizzato all'interno di JSX!

Posted on

Author L'autore

Dario Fadda alias {Nuke}

Da sempre appassionato di informatica e del mondo open-source nel 2003 ho fondato il portale Spcnet.it per condividere articoli, notizie ed in generale tutto quello che riguarda il mondo dei computers, con particolare attenzione alle tematiche di Sicurezza informatica, Malware e Ransomware, ma anche guide di Programmazione e utili suggerimenti per tutte le fasce di interesse.
Dal 2006 sono membro del Gulch (Gruppo Utenti Linux Cagliari), con cui cerco di dare il mio contributo attivo per eventi e LinuxDay.
Su Twitter segnalo e condivido nuovi Phishing pericolosi con approfondimenti sul Bank Security.

Ho ideato Hacker Alert per effettuare ricerche di vulnerabilità e phishing in tempo reale.

Praticamente per tutto ciò che scopro e che è degno di nota ne condivido il codice sorgente su Git Hub.
Per tutto il resto c'è Dario Fadda .it che contiene "quasi" tutto di me.