我无法理解为什么在箭头函数中我们不需要在({})括号中包装箭头函数的文字,而不是在这个例子中只包含在single()括号中的文字.为什么？我曾在网上冲浪找到答案,但失败了.
还有为什么我们把参数放在双括号({})中,而不仅仅是()？
const FilterLink = ({ filter,children }) => (
<NavLink
to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
activeStyle={ {
textDecoration: 'none',color: 'black'
}}
>
{children}
</NavLink>
)
解决方法
使用({})是
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 })的答案
