diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index 62067d39c..0dd26a6ed 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -1,26 +1,26 @@ --- -id: faq-functions -title: Passing Functions to Components +id: faq-funciones +title: Pasando Funciones a Componentes permalink: docs/faq-functions.html layout: docs category: FAQ --- -### How do I pass an event handler (like onClick) to a component? {#how-do-i-pass-an-event-handler-like-onclick-to-a-component} +### ¿Cómo puedo pasar un controlador de eventos (como onClick) a un componente? {#how-do-i-pass-an-event-handler-like-onclick-to-a-component} -Pass event handlers and other functions as props to child components: +Pasa controladores de eventos y otras funciones como props a componentes hijos: ```jsx ; + return ; } } ``` -#### Class Properties (Stage 3 Proposal) {#class-properties-stage-3-proposal} +#### Propiedades de las Clases (Propuesta de etapa 3) {#class-properties-stage-3-proposal} ```jsx class Foo extends Component { - // Note: this syntax is experimental and not standardized yet. + // Nota: esta sintaxis es experimental y todavía no está estandarizada. handleClick = () => { - console.log('Click happened'); + console.log('Se hizo click'); } render() { - return ; + return ; } } ``` -#### Bind in Render {#bind-in-render} +#### Enlazar en la renderización {#bind-in-render} ```jsx class Foo extends Component { handleClick() { - console.log('Click happened'); + console.log('Se hizo click'); } render() { - return ; + return ; } } ``` ->**Note:** +>**Nota:** > ->Using `Function.prototype.bind` in render creates a new function each time the component renders, which may have performance implications (see below). +> Al usar `Function.prototype.bind` dentro de la renderización se crea una nueva función cada vez que el componente se renderiza, lo cual podría implicar problemas de rendimiento (ver abajo). -#### Arrow Function in Render {#arrow-function-in-render} +#### Funciones Flecha en renderización {#arrow-function-in-render} ```jsx class Foo extends Component { handleClick() { - console.log('Click happened'); + console.log('Se hizo click'); } render() { - return ; + return ; } } ``` ->**Note:** +>**Nota:** > ->Using an arrow function in render creates a new function each time the component renders, which may have performance implications (see below). +>Usar una función flecha en el renderizado crea una nueva función cada vez que se renderiza el componente, lo cual podría implicar problemas de rendimiento (ver abajo) -### Is it OK to use arrow functions in render methods? {#is-it-ok-to-use-arrow-functions-in-render-methods} +### ¿Está bien utilizar funciones flecha en los métodos de renderizado? {#is-it-ok-to-use-arrow-functions-in-render-methods} -Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions. +Generalmente hablando, si está bien y normalmente es la forma más fácil de pasar parámetros a funciones. -If you do have performance issues, by all means, optimize! +Si tienes problemas de rendimiento, ¡no dudes en optimizar! -### Why is binding necessary at all? {#why-is-binding-necessary-at-all} +### ¿Por qué tiene que ser necesario enlazar? {#why-is-binding-necessary-at-all} -In JavaScript, these two code snippets are **not** equivalent: +En JavaScript, estos dos fragmentos de código **no** son equivalentes. ```js obj.method(); @@ -104,50 +104,50 @@ var method = obj.method; method(); ``` -Binding methods helps ensure that the second snippet works the same way as the first one. +Los métodos de enlace nos aseguran que el segundo fragmento funcione de la misma manera que el primero. -With React, typically you only need to bind the methods you *pass* to other components. For example, ` + // Incorrecto: ¡Se llama a handleClick en vez de ser pasado como una referencia! + return } ``` -Instead, *pass the function itself* (without parens): +En lugar de eso, *pasa la función como tal* (sin los paréntesis) ```jsx render() { - // Correct: handleClick is passed as a reference! - return + // Correcto: handleClick se pasa como una referencia! + return } ``` -### How do I pass a parameter to an event handler or callback? {#how-do-i-pass-a-parameter-to-an-event-handler-or-callback} +### ¿Cómo paso un parámetro a un controlador de eventos o callback? {#how-do-i-pass-a-parameter-to-an-event-handler-or-callback} -You can use an arrow function to wrap around an event handler and pass parameters: +Puedes utilizar funciones flecha para envolver un controlador de eventos y pasar parámetros: ```jsx