Reagire elementi e le funzioni di direzione di grasso

Question

Negli esempi Redux, la sintassi utilizzata è:

const App =() => (
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
) 

stavo giocherellando in giro con un nuovo esempio app e sbagliato a scrivere il codice di cui sopra con le parentesi graffe invece di parentesi in questo modo:

const App =() => { 
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
} 

I console ha registrato entrambi i seguenti e il risultato sembrava essere lo stesso. La mia domanda è qual è la differenza tra questi 2 e perché Reagisce come le parentesi ma non le parentesi graffe?

Answer 1

TL; DR

Il primo esempio è più o meno equivalente a:

var App = function() { return <div>...</div>; }; 

La seconda è più o meno equivalente a:

var App = function() { <div>...</div>; }; 

Reagire è probabilmente lamenta che nulla viene restituito nel secondo esempio.

leggermente più lungo Versione

Prendiamo Reagire fuori dall'equazione. In ES6 è possibile creare una funzione di grasso freccia in questo modo:

const getWord =() => { 
    return 'unicorn'; 
} 

e siamo dato una scorciatoia per fare la stessa cosa con meno codice:

const getWord =() => 'unicorn'; 

unicorn viene restituito anche se si don' t mai esplicitamente digitare return ovunque.

Nel tuo primo esempio, hai avvolto il tuo JSX tra parentesi. L'equivalente del nostro semplice esempio è:

const getWord =() => ('unicorn'); 

o questo

const getWord =() => (
    'unicorn' 
); 

Gli ultimi quattro esempi sono equivalenti. Spero possa aiutare!