Question

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

还有为什么我们将参数放在双括号({})中，而不仅仅是()？

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

Answer 1

使用({})是destructure个参数，而=> ()是一个隐含的返回，相当于=> { return ()}，而(只能用于消除开头之间的歧义对象和函数体的开括号，通常在具有多行返回值时使用。您可以简单地避免使用(并将NavLink与箭头=>

放在同一行

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>
    )
}

检查more details on the usage of destructuring in ({ filter, children })

的答案

Answer 2

const add = ( a, b ) => ( a + b )

相当于

const add = ( a, b ) => { return a+b; }

在()之后使用=>时，它会自动返回内部值。

修改：您也可以完全省略()，感谢Tom Fenesh

箭头函数和括号（）或{}或（{}）的使用

2 个答案: