Esiste console.log in JSX?

21 Aprile 2020 - Tempo di lettura: 19 minuti

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
• { className: 'greeting' }: Questi sono gli oggetti di scena utilizzati in <h1>. Viene convertito in un oggetto. La chiave dell'oggetto è il nome dell'elica e il valore, il suo valore.
• 'Hello, world!': Questo si chiama children. È tutto ciò che viene passato tra il tag di apertura <h1>e il tag di chiusura </h1>.

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 createElement. Non viene eseguito.

Ha senso, sopra abbiamo il titolo List of todos. Come 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!