问题描述
我无法理解为什么在箭头函数中我们不需要在({})
大括号中包含箭头函数的文字,而不是在这个例子中,文字只包含在单个()
大括号中。为什么?我曾在网上冲浪找到答案,但失败了。
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>
)
推荐答案
使用({})
是参数和 => ()
是一个隐含的返回值,相当于 => {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>
)
}
检查
这篇关于箭头函数和括号()或{}或({})的使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!