Стрелочные функции и использование круглых скобок () или {} или ({})

Я не могу понять, почему в стрелочных функциях нам не нужно заключать литерал стрелочной функции в фигурные скобки ({}) вместо того, чтобы в этом примере литерал просто заключался в одиночные фигурные скобки (). Почему? Я бороздил просторы интернета, чтобы найти ответ на этот вопрос, но безуспешно.

А также почему мы помещаем аргументы в двойные фигурные скобки ({}), а не просто ()?

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

reactjs javascript ecmascript-6
person Max Wolfen    schedule 22.03.2018    source источник
comment
developer.mozilla.org/en-US/docs/ Web/JavaScript/Reference/ и разработчик .mozilla.org/en-US/docs/Web/JavaScript/Reference/   -  person Tom Fenech    schedule 22.03.2018

Ответы (2)


arrow_upward
58
arrow_downward

Использование ({}) означает 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>
    )
}

Проверьте этот ответ для более подробной информации об использовании деструктуризации в ({ filter, children })

person Shubham Khatri    schedule 22.03.2018
comment
@ShubhamKhatri, а что в моем случае => () делать? В своем ответе вы дали две отдельные точки зрения: 1. является неявным возвратом, эквивалентным => { return ()} 2. ( служит только для устранения неоднозначности между началом объекта и открывающими фигурными скобками тела функции. - person Max Wolfen; 22.03.2018
comment
@MaxWolfen, это одно и то же, вы всегда можете написать const FilterLink = ({ filter, children }) => ( <NavLink или const FilterLink = ({ filter, children }) => <NavLink - person Shubham Khatri; 22.03.2018
comment
@TomFenech Это тоже не совсем правильно. Существует только неявный возврат, когда это одна строка. При использовании фигурных скобок (многострочных) может быть установлен явный возврат. Итак, другими словами, это не неявный возврат из-за знака =>, а потому что это одна строка. - person GuyT; 22.03.2018
comment
@GuyT, чтобы надеть шляпу педанта, это тоже не совсем правильно, поскольку мы говорим об одном выражении, а не о строке :^) - person Tom Fenech; 22.03.2018
comment
@Shubham Вместо того, чтобы говорить о линиях, возможно, вам следует отредактировать свой ответ, чтобы поговорить о выражениях. - person Tom Fenech; 22.03.2018
comment
@TomFenech К сожалению, я неправильно истолковал ваш предыдущий комментарий, который на 100% верен. Я удалю свой «ответ» на него. - person GuyT; 22.03.2018
comment
Есть ли шанс, что это поведение будет исправлено? Например, я провел последние 5 минут в панике, потому что удалил скобки в el => ({ a: 1 }). Есть ли препятствия для этого? - person Minh Nghĩa; 20.08.2020

arrow_upward
20
arrow_downward

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

Эквивалентно

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

Когда вы используете () после =>, он просто автоматически возвращает значения внутри.

Редактировать: вы также можете полностью опустить () благодаря Tom Fenesh

person Chriss Hd    schedule 22.03.2018
comment
Нет, ( после => в этом случае ничего не делает. - person Tom Fenech; 22.03.2018
comment
@TomFenech действительно, это то же самое, что и => a + b. Он должен был поместить a + b в следующую строку, чтобы донести мысль - person softcode; 08.05.2021