javascript - 箭头函数和括号 () 或 {} 或 ({}) 的使用

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