Guardando parecchi appunti, ho visto spesso provare questo: 

n

render() {n return (n 
n 
List of todos
n console.log(this.props.todos)n 
n );n}

n

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

n

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

n

La soluzione più utilizzata:

n

Incorpora l’espressione nel tuo JSX:

n

render() {n return (n 
n 
List of todos
n { console.log(this.props.todos) }n 
n );n}

n

Un’altra soluzione popolare:

n

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

n

render() {n  console.log(this.props.todos);n  return (n    
n      
List of todos
n    
n  );n}

n

Una soluzione elegante:

n

Divertiti scrivendo e usando il tuo componente :

n

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

n

Quindi usalo:

n

render() {n return (n 
n 
List of todos
n { this.props.todos }n 
n );n}

n

Perchè è così?

n

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

n

Solo alla fine, JSX viene compilato in JavaScript.

n

Ad esempio, se scriviamo il seguente JSX:

n

const element = (n 
n Hello, world!n 
n);

n

Verrà compilato in:

n

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

n

Rivediamo i parametri di React.createElement:

n

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

n

• { className: 'greeting' }: Questi sono gli oggetti di scena utilizzati in 


  . Viene convertito in un oggetto. La chiave dell’oggetto è il nome dell’elica e il valore, il suo valore.

n

• 'Hello, world!': Questo si chiama children. È tutto ciò che viene passato tra il tag di apertura 


  e il tag di chiusura 

  .

n

n

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

n

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

n

Questo verrebbe compilato in:

n

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

n

Guarda come console.logviene passato come stringa a createElement. Non viene eseguito.

n

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?

n

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

n

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

n

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