Actualmente estoy tomando un curso en línea para aprender React y no sé cuándo debo usar { vs ( .
tengo 3 archivos:
const App = () => { const CardList = ({ monsters }) => ( const Card = ({ monster }) => { Este es el código que actualmente funciona. Tenga en cuenta que en el segundo código, el último carácter utilizado es ( . Pensé en cambiarlo a { para hacerlo coherente con los otros archivos, pero de alguna manera la lista de tarjetas ya no aparece en la página, aunque no obtuve ningún error de compilación.
¿Alguien puede explicarme esto y decirme cuándo debo usar uno sobre el otro?
Esta es esencialmente una característica de las funciones de flecha en js.
const myArrowFunc = ({key1}) => ("Hello there! " + key1);es esencialmente lo mismo que
const myArrowFunc = ({key1}) => { return "Hello there! " + key1 };cuando omite los corchetes, el retorno es implícito. Cuando incluye los corchetes, debe usar explícitamente la instrucción de retorno.
const someObj = { key1: "value1" }; const someReturn = myArrowFunc(someObj); console.log(someReturn); // logs "Hello there! value1" to the console()=>{} es la sintaxis de la función flecha
Cuando una función de flecha solo contiene una línea que devuelve un valor, por ejemplo:
() => { return 1; }se puede simplificar a
() => 1
Ahora, ¿qué sucede si desea devolver un object directamente? es decir, cómo simplificar
() => { return { foo: "bar" } } Dado que un object también usa {} , no puede escribir {foo: "bar"} directamente después de la flecha, ya que se tratará como el cuerpo de la función. Envolver el object dentro de () resuelve el problema ya que un fragmento () debe ser una expresión. El ejemplo anterior se puede simplificar a
() => ( { foo : "bar" } )