From 9a6b6eacf059a892bef0262d4264f98669f54a89 Mon Sep 17 00:00:00 2001 From: elyalvarado Date: Mon, 4 Feb 2019 13:35:57 -0500 Subject: [PATCH 1/2] Translate: Forwarding Refs --- content/docs/forwarding-refs.md | 66 ++++++++++++++++----------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 46891e27b..d556d47c5 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,76 +1,76 @@ --- id: forwarding-refs -title: Forwarding Refs +title: Reenvío de Refs permalink: docs/forwarding-refs.html --- -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +El reenvío de Refs es una técnica para pasar automáticamente una [ref](/docs/refs-and-the-dom.html) a través de un componente a uno de sus hijos. Esto normalmente no es necesario para la mayoría de los componentes en una aplicación. Sin embargo, puede ser util para ciertos tipos de componentes, especialmente en bibliotecas de componentes reutilizables. Los escenarios mas comunes son descritos a continuación. -## Forwarding refs to DOM components +## Reenviando refs a componentes DOM -Consider a `FancyButton` component that renders the native `button` DOM element: +Considere un componente `FancyButton` que renderiza el elemento DOM nativo `button`: `embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +Los componentes React ocultan sus detalles de implementación, incluyendo su salida renderizada. Otros componentes que usen `FancyButton` **usualmente no necesitarán** [obtener una ref](/docs/refs-and-the-dom.html) del elemento DOM interno `button`. Esto es bueno, ya que previene que los componentes dependan demasiado de la estructura DOM de otros. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +Aunque dicho encapsulamiento es deseable para componentes a nivel de aplicación como `FeedStory` o `Comment`, puede ser inconveniente en el caso de componentes "hoja" altamente reutilizables como `FancyButton` o `MyTextInput`. Estos componentes tienden a ser usados a lo largo de las aplicaciones de forma similar a los componentes DOM `button` e `input`, y acceder sus nodos DOM puede resultar inevitable para gestionar el foco, la selección, o animaciones. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** +**El Reenvío de Refs es una característica opcional que permite a algunos componentes tomar una `ref` que reciben, y pasarla (en otras palabras, "reenviarla") a un hijo.** -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +En el siguiente ejemplo, `FancyButton` usa `React.forwardRef` para obtener la `ref` que le pasaron, y luego reenviarla al `button` DOM que renderiza: `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +De esta forma, los componentes que usan `FancyButton` pueden obtener una ref al nodo DOM `button` subyacente, y accederlo si es necesario - tal como si estuvieran usando el `button` DOM directamente. -Here is a step-by-step explanation of what happens in the above example: +A continuación un explicación paso a paso de lo que sucede en el ejemplo de arriba: -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to `