React elements and fat arrow functions

Question

In the Redux examples, the syntax used is:

const App = () => (
  

    
    
    

  

        
                      

              相关标签:
       
      

Answer 1

TL;DR

Your first example is more or less equivalent to:

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

Your second is more or less equivalent to:

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

React is probably complaining that nothing is being returned in the second example.

Slightly Longer Version

Let's take React out of the equation. In es6 you can create a fat arrow function like this:

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

And we're given a shortcut to do the same thing with less code:

const getWord = () => 'unicorn';

unicorn is returned even though you don't ever explicitly type return anywhere.

In your first example, you wrapped your JSX in parenthesis. The equivalent in our simple example is:

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

or this

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

The last four examples are equivalent. Hope that helps!