箭头函数和括号（）或{}或（{}）的使用 [英] Arrow functions and the use of parentheses () or {} or ({})

问题描述

我无法理解为什么在箭头函数中我们不需要在（{}）大括号中包含箭头函数的文字，而不是在这个例子中，文字只包含在单个（）大括号中。为什么？我曾在网上冲浪找到答案，但失败了。

I cannot understand why in the arrow functions we do not need to wrap the literal of arrow function in the ({}) braces, instead of in this example the literal just wrapped in the single () braces. Why? I had surfed the internet to find an answer on it, but it failed.

还有为什么我们把参数放在双括号（{}）中，而不仅仅是（）？

And also why we put the arguments in double braces ({}), instead of just ()?

const FilterLink = ({ filter, children }) => (
   <NavLink
       to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
       activeStyle={ {
       textDecoration: 'none',
           color: 'black'
       }}
   >
       {children}
   </NavLink>
)

推荐答案

使用（{}）是 destructure 参数和 => （）是一个隐含的返回值，相当于 => {return（）} 和（仅用于消除对象的开始和函数体的开括号之间的歧义，通常会被使用当你有一个多行返回值。你可以简单地避免使用（并将 NavLink 放在同一行中arrow =>

Using ({}) is to destructure the arguments and => () is an implicit return equivalent to => { return ()} and ( only serves to disambiguate between the start of an object and the opening braces of a function body and would generally be used when you have a multiline return value. You could simply avoid using ( and have the NavLink in the same line as the arrow =>

const FilterLink = ({ filter, children }) => ( // <-- implicit return 
  <NavLink
    to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
    activeStyle={ {
      textDecoration: 'none',
      color: 'black'
    }}
  >
    {children}
  </NavLink>
)

相当于

const FilterLink = ({ filter, children }) => {
   return (
      <NavLink
        to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
        activeStyle={ {
          textDecoration: 'none',
          color: 'black'
        }}
      >
        {children}
      </NavLink>
    )
}

检查有关（{filter，children}）中解构用法的详细信息

这篇关于箭头函数和括号（）或{}或（{}）的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！