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

Question

我不明白为什么 在arrow函数中 我们不需要 将arrow函数
的文字包装在({})大括号中，而不是在此示例中将文字包装在单个()大括号中。为什么？我已经上网冲浪了，但是找不到答案。

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

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