web-dev-qa-db-fra.com

Fonction flèche sans accolades

Je suis nouveau sur ES6 et React et je continue de voir les fonctions fléchées. Pourquoi certaines fonctions fléchées utilisent-elles des accolades après la grosse flèche et certaines utilisent des parenthèses? Par exemple:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

vs.

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

Merci pour toute aide!

javascriptecmascript-6react-jsxarrow-functions
43
dkimot

Les parenthèses renvoient une seule valeur, les accolades exécutent plusieurs lignes de code.

Votre exemple semble déroutant car il utilise JSX qui ressemble à plusieurs "lignes" mais qui est en fait simplement compilé en un seul "élément".

Voici quelques autres exemples qui font tous la même chose:

const a = (who) => "hello " + who + "!";
const b = (who) => (
    "hello " + 
    who + 
    "!"
);
const c = (who) => {
  return "hello " + who + "!";
};

Vous verrez également souvent des parenthèses autour des littéraux d'objet, car c'est un moyen d'éviter que l'analyseur le traite comme un bloc de code:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object
83
david

On peut également utiliser des accolades pour empêcher une fonction de flèche d'une seule ligne de renvoyer une valeur - ou pour faire comprendre au développeur suivant qu'une fonction de flèche d'une seule ligne ne devrait pas, dans ce cas, renvoyer quoi que ce soit.

Par exemple:

const myFunc = (stuff) => { someArray.Push(stuff) }
const otherFunc = (stuff) => someArray.Push(stuff)

console.log(myFunc())    // --> logs undefined
console.log(otherFunc()) // --> logs result of Push which is new array length
15
GrayedFox

En fait, dans une mallette lorsque quelqu'un utilise des accolades dans une déclaration de fonction de flèche, elle est égale à ci-dessous:

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };
6
AmerllicA

Dans votre premier exemple, le côté droit de la fonction flèche montre une expression unique qui est entourée par un opérateur de regroupement:

const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
);

Un cas comparable similaire serait le suivant:

const foo = (params) => (<span><p>Content</p></span>);

Une distinction, dans les cas ci-dessus utilisant des expressions simples, est que le côté droit est la valeur retournée de la fonction .

D'un autre côté, si vous utilisez des accolades, JavaScript comprendra cela comme une déclaration:

const foo = (params) => {} // this is not an object being returned, it's just an empty statement

Par conséquent, l'utilisation de l'instruction est un bon début pour vous d'avoir du code en elle, plusieurs lignes, et cela nécessitera l'utilisation de "retour" si la fonction est destinée à renvoyer une valeur:

const foo = (params) => {
    let value = 1; 
    return value;
}

Dans le cas où vous souhaiteriez retourner un objet vide sous la forme la plus courte:

const foo = (params) => ({})

Voir tests

1
Marcio S Galli