No puedo entender por qué en las funciones de flecha no necesitamos envolver el literal de la función de flecha en las llaves ({}) , en lugar de en este ejemplo, el literal simplemente envuelto en las llaves simples () . ¿Por qué? Había navegado por Internet para encontrar una respuesta, pero falló.
¿Y también por qué ponemos los argumentos entre llaves dobles ({}) , en lugar de solo () ?
const FilterLink = ({ filter, children }) => ( <NavLink to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`} activeStyle={ { textDecoration: 'none', color: 'black' }} > {children} </NavLink> )El uso de ({}) es para destructure los argumentos y => () es un retorno implícito equivalente a => { return ()} y ( solo sirve para eliminar la ambigüedad entre el inicio de un objeto y las llaves de apertura del cuerpo de una función y generalmente se usa cuando tiene un valor de retorno de varias líneas. Simplemente puede evitar usar ( y tener el NavLink en la misma línea que la flecha =>
const FilterLink = ({ filter, children }) => ( // <-- implicit return <NavLink to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`} activeStyle={ { textDecoration: 'none', color: 'black' }} > {children} </NavLink> )es equivalente a
const FilterLink = ({ filter, children }) => { return ( <NavLink to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`} activeStyle={ { textDecoration: 'none', color: 'black' }} > {children} </NavLink> ) } Consulte esta respuesta para obtener más detalles sobre el uso de la desestructuración en ({ filter, children })
const add = ( a, b ) => ( a + b )
Es equivalente a
const add = ( a, b ) => { return a+b; }
Cuando usa el () después de su => , simplemente devuelve automáticamente los valores internos.
Editar: también puede omitir el () por completo, gracias a Tom Fenesh