我不明白为什么在箭头函数中我们不需要将箭头函数({})的文字包裹在大括号中，而不是在这个例子中将文字包裹在单个()大括号中。为什么？我曾在互联网上寻找答案，但失败了。
还有为什么我们把参数放在双括号中({})，而不是仅仅放在()？
const FilterLink = ({ filter, children }) => (
<NavLink
to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
activeStyle={ {
textDecoration: 'none',
color: 'black'
}}
>
{children}
</NavLink>
)
使用({})is 到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>
)
}
const add = ( a, b ) => ( a + b )
相当于
const add = ( a, b ) => { return a+b; }
当您使用()after 时，=>它只会自动返回里面的值。
编辑：您也可以()完全省略，感谢Tom Fenesh