Argumentos de flecha

Hay algunas formas generales de funciones de flecha.

• arg1 => es estrictamente para un argumento
• (arg1, arg2) => más de un argumento, entre paréntesis.
• () => sin argumentos también requiere paréntesis

Llaves de flecha

Al otro lado de la flecha, hay otras 2 formas:

• => value devuelve valor (o el resultado de una expresión)
• => {someStatements;} no devuelve nada implícitamente.

Convertir a function()

Al convertir a funciones, siga esta tabla:

• arg1 => se convierte en function(arg1)
• (arg1, arg2) => se convierte en function(arg1, arg2)
• => value se convierte en function(args) { return value }
• => { someStatements;} se convierte en function(args) { someStatements;}

this : diferente para las funciones de flecha

Por último, una diferencia sutil pero importante. Las funciones de flecha usan this desde sus contenedores. Las funciones declaradas con la palabra clave function siempre tienen su propio this .

Poniendolo todo junto

Entonces, en este caso particular, dado todos.map(item => <Component />) , la función es item => <Component /> y trabajando hacia atrás desde la tabla anterior podemos ver que esto es equivalente a la función function(item) { return <Component />; }

La línea completa se ve así:

 const outerThis = this; //save with a different name so we can access within function const todoItems = this.state.todos.map( function(item) { return <TodoItem key={item.id} item={item} handleChange={outerThis.handleChange}/> } )

Consulte también Expresión de la función de flecha en MDN , donde puede leer sobre algunas otras advertencias de la función de flecha (como sin arguments , new , prototype o yield ) y this operador .

Si desea transformar una función de flecha en una función normal, siga este código:

 const todoItems = this.state.todos.map(handleMap) function handleMap(item) { return <TodoItem key={item.id} item={item} handleChange={this.handleChange}/> }

Pero recomiendo usar componentes de función y ganchos React. Lea este artículo: https://reactjs.org/docs/hooks-intro.html