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!

Currently there are no comments, so be the first!