From 24530d09dbffbca000251651c77a28aa61d835b6 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Tue, 5 Feb 2019 17:49:19 -0400 Subject: [PATCH 1/8] Translating title and first lines --- content/docs/refs-and-the-dom.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 1dafc540f..497b5fd3d 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -1,6 +1,6 @@ --- id: refs-and-the-dom -title: Refs and the DOM +title: Referencias y el DOM redirect_from: - "docs/working-with-the-browser.html" - "docs/more-about-refs.html" @@ -11,7 +11,7 @@ redirect_from: permalink: docs/refs-and-the-dom.html --- -Refs provide a way to access DOM nodes or React elements created in the render method. +Las referencias proporcionan una forma de acceder a los nodos del DOM o a elementos React creados en el metodo de renderizado. In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. From 7d0eac9a6c155b3d87608b864511f6e47c3c5501 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Wed, 6 Feb 2019 15:22:29 -0400 Subject: [PATCH 2/8] Translating when to use refs --- content/docs/refs-and-the-dom.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 497b5fd3d..73ff3b7cb 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -13,21 +13,21 @@ permalink: docs/refs-and-the-dom.html Las referencias proporcionan una forma de acceder a los nodos del DOM o a elementos React creados en el metodo de renderizado. -In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. +En un flujo normal de datos de React, [las propiedades](/docs/components-and-props.html) son la unica forma en la que los componentes padres pueden interactuar con sus hijos. Para modificar un hijo, vuelves a renderizarlo con propiedades nuevas. Sin embargo, hay ciertos casos donde necesitarás modificar imperativamente un hijo fuera del flujo de datos tipico. El hijo a ser modificado puede ser una instancia de un componente React, o puede ser un elemento del DOM. Para ambos casos, React proporciona una via de escape. -### When to Use Refs +### Cuando Usar Referencias -There are a few good use cases for refs: +Existen unos cuantos buenos casos de uso para referencias: -* Managing focus, text selection, or media playback. -* Triggering imperative animations. -* Integrating with third-party DOM libraries. +* Controlar enfoques, selección de texto, o reproducción de medios. +* Activar animaciones imperativas. +* Integración con librerías DOM de terceros. -Avoid using refs for anything that can be done declaratively. +Evita el uso de referencias en cualquier cosa que pueda ser hecha declarativamente. -For example, instead of exposing `open()` and `close()` methods on a `Dialog` component, pass an `isOpen` prop to it. +Por ejemplo, en lugar de exponer los métodos `open()` y `close()` a un componente `Dialog`, pasa una propiedad `isOpen` a este en su lugar. -### Don't Overuse Refs +### No Abuses de las Referencias Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this. From 1eb4b2643302610c96e55f6bca5a7c42ba7796c4 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Wed, 6 Feb 2019 17:39:37 -0400 Subject: [PATCH 3/8] Advancing translation, translating until callback refs section and code example --- content/docs/refs-and-the-dom.md | 86 ++++++++++++++++---------------- 1 file changed, 44 insertions(+), 42 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 73ff3b7cb..9b6f364bc 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -29,15 +29,15 @@ Por ejemplo, en lugar de exponer los métodos `open()` y `close()` a un componen ### No Abuses de las Referencias -Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this. +Tu primer pensamiento puede ser usar referencias para "hacer que las cosas funcionen" en tu aplicación. De ser este el caso, espera un momento, y piensa críticamente donde debe estar el estado en la jerarquía de componentes. Frecuentemente, se vuelve mas claro que el lugar donde debería "estar" el estado, es en el nivel más alto de la jerarquía. Mira la guía [Levantando El Estado](/docs/lifting-state-up.html) para ejemplos de esto. -> Note +> Nota > -> The examples below have been updated to use the `React.createRef()` API introduced in React 16.3. If you are using an earlier release of React, we recommend using [callback refs](#callback-refs) instead. +> Los ejemplos a continuación han sido actualizados para hacer uso del API `React.createRef()` introducido en React 16.3. Si estas usando una versión de React anterior a esta, recomendamos usar en su lugar [referencias mediante callback](#callback-refs). -### Creating Refs +### Creando Referencias -Refs are created using `React.createRef()` and attached to React elements via the `ref` attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component. +Las referencias son creadas usando `React.createRef()` y agregandolas a elementos React mediante el atributo `ref`. Las referencias son asignadas comunmente a una propiedad de instancia cuando un componente es construido, así puede ser referenciados mediante el componente. ```javascript{4,7} class MyComponent extends React.Component { @@ -51,23 +51,25 @@ class MyComponent extends React.Component { } ``` -### Accessing Refs +### Accediendo a Referencias -When a ref is passed to an element in `render`, a reference to the node becomes accessible at the `current` attribute of the ref. +Cuando una referencia es pasada a un elemento en el `renderizado`, una referencia al nodo pasa a ser accesible en el atributo `current` de la referencia. ```javascript const node = this.myRef.current; ``` -The value of the ref differs depending on the type of the node: +El valor de la referencia es diferente dependiendo del tipo de nodo: + +- Cuando el atributo `ref` es usado en un elemento HTML, la `referencia` creada en el constructor con `React.createRef()` recibe el elemento DOM adyacente como su propiedad `current`. +- Cuando el atributo `ref` es usado en un componente de clase personalizado, el objeto de la `referencia` recibe la instancia montada del componente como su atributo `current`. +- **No puedes hacer uso de `referencias` en componentes de función** debido a que no tienen instancias. -- When the `ref` attribute is used on an HTML element, the `ref` created in the constructor with `React.createRef()` receives the underlying DOM element as its `current` property. -- When the `ref` attribute is used on a custom class component, the `ref` object receives the mounted instance of the component as its `current`. -- **You may not use the `ref` attribute on function components** because they don't have instances. +Los ejemplos a continuación demuestran las diferencias. -The examples below demonstrate the differences. +#### Agregando una Referencia a un elemnto del DOM -#### Adding a Ref to a DOM Element +Esta código utiliza un `ref` para guardar una referencia al nodo del DOM: This code uses a `ref` to store a reference to a DOM node: @@ -75,20 +77,20 @@ This code uses a `ref` to store a reference to a DOM node: class CustomTextInput extends React.Component { constructor(props) { super(props); - // create a ref to store the textInput DOM element + // crea una referencia para guardar el elemento textInput del DOM this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } focusTextInput() { - // Explicitly focus the text input using the raw DOM API - // Note: we're accessing "current" to get the DOM node + // Hace enfoque explicitamente del campo de texto haciendo uso de un API del DOM + // Nota: Estamos accediendo la propiedad "current" para obtener el nodo del DOM this.textInput.current.focus(); } render() { - // tell React that we want to associate the ref - // with the `textInput` that we created in the constructor + // Informa a React de que queremos agregar la referencia `textInput` que creamos + // en el constructor a la etiqueta return (
); @@ -161,13 +163,13 @@ class Parent extends React.Component { } ``` -You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state. +Tienes que convertir el componente a una clase si necesitas utilizar una referencia en el, justo como cuando necesitas mëtodos del ciclo de vida, o utilizar estado. -You can, however, **use the `ref` attribute inside a function component** as long as you refer to a DOM element or a class component: +Sin embargo, puedes **usar el atributo `ref` dentro de un componente de función** siempre y cuando hagas referencia de un elemento del DOM o de un componente de clase. ```javascript{2,3,6,13} function CustomTextInput(props) { - // textInput must be declared here so the ref can refer to it + // textInput debe estar declarado aquí para que *ref* pueda referenciarlo let textInput = React.createRef(); function handleClick() { @@ -189,25 +191,25 @@ function CustomTextInput(props) { } ``` -### Exposing DOM Refs to Parent Components +### Exponiendo Referencias del DOM a Componentes Padres -In rare cases, you might want to have access to a child's DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node. +En casos raros, puede que necesites acceder al nodo DOM de un hijo desde un componente padre. Esto generalmente no es recomendado porque rompe con la encapsulación del componente, pero puede ser utíl ocacionalmente para hacer enfoque, o medir el tamaño o posición de un nodo hijo del DOM. -While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with function components. +Bien podrías [agregar una referencia al componente hijo](#adding-a-ref-to-a-class-component), esta no es la solución ideal, porque lo que obtendrías sería la instancia del componente en vez del nodo del DOM. Adicionalmente, esto no funcionaría con componentes de función. -If you use React 16.3 or higher, we recommend to use [ref forwarding](/docs/forwarding-refs.html) for these cases. **Ref forwarding lets components opt into exposing any child component's ref as their own**. You can find a detailed example of how to expose a child's DOM node to a parent component [in the ref forwarding documentation](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). +Si usas React 16.3 o una versión mayor, recomendamos usar [paso de referencias](/docs/forwarding-refs.html) para estos casos. **Paso de referencias permite que los componentes decidan exponer cualquier referencia de sus hijos como si fuera la suya**. Puedes encontrar un ejemplo detallado de como exponer los nodos DOM de los hijos a un componente padre [en la documentación de paso de referencias](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). -If you use React 16.2 or lower, or if you need more flexibility than provided by ref forwarding, you can use [this alternative approach](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) and explicitly pass a ref as a differently named prop. +Si usas React 16.2 o una versión más antigua, o si necesitas más flexibilidad de la que provee el paso de referencias, puedes utilizar [este enfoque alternativo](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) y pasar explicitamente una referencia como una propiedad nombrada diferente. -When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). +Cuando sea posible, recomendamos no exponer los nodos del DOM, pero puede ser utíl como una vía de escape. Recuerda que este enfoque require que agregues código al componente hijo. Si no tienes control alguno sobre la implementación del componente hijo, tu ultima opción es usar [`findDOMNode()`](/docs/react-dom.html#finddomnode), pero esto no es recomendado, y esta dspreciado en modo estricto: [`(StrictMode)`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). -### Callback Refs +### Referencias mediante Callback -React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset. +React tambien ofrece otra manera de agregar referencias con "referencias mediante callback", que da un control mas detallado sobre cuando las referencias son establecidas o no. -Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere. +En lugar de pasar un atributo a `ref` creado por `createRef()`, pasas una función. La función recibe la instancia del componente React o el elemento DOM del HTML como su argumento, que puede ser guardado y accedido desde otros lugares. -The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property. +El ejemplo a continuación implementa un patrón común: usar el `ref` mediante callback para guardar una referencia al nodo del DOM en una propiedad de la instancia. ```javascript{5,7-9,11-14,19,29,34} class CustomTextInput extends React.Component { @@ -221,19 +223,19 @@ class CustomTextInput extends React.Component { }; this.focusTextInput = () => { - // Focus the text input using the raw DOM API + // Hace enfoque del campo de texto usando un mëtodo propio del DOM if (this.textInput) this.textInput.focus(); }; } componentDidMount() { - // autofocus the input on mount + // Auto enfoca el campo despues de que el componente se monta this.focusTextInput(); } render() { - // Use the `ref` callback to store a reference to the text input DOM - // element in an instance field (for example, this.textInput). + // Usa el `ref` mediante callback para guardar una referencia al campo de texto del DOM + // en una propiedad de la instancia (por ejemplo, this.textInput) return (
Date: Fri, 8 Feb 2019 20:35:45 -0400 Subject: [PATCH 4/8] Finishing first translation draft --- content/docs/refs-and-the-dom.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 9b6f364bc..828d84fe7 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -11,9 +11,9 @@ redirect_from: permalink: docs/refs-and-the-dom.html --- -Las referencias proporcionan una forma de acceder a los nodos del DOM o a elementos React creados en el metodo de renderizado. +Las referencias proporcionan una forma de acceder a los nodos del DOM o a elementos React creados en el método de renderizado. -En un flujo normal de datos de React, [las propiedades](/docs/components-and-props.html) son la unica forma en la que los componentes padres pueden interactuar con sus hijos. Para modificar un hijo, vuelves a renderizarlo con propiedades nuevas. Sin embargo, hay ciertos casos donde necesitarás modificar imperativamente un hijo fuera del flujo de datos tipico. El hijo a ser modificado puede ser una instancia de un componente React, o puede ser un elemento del DOM. Para ambos casos, React proporciona una via de escape. +En un flujo normal de datos de React, [las propiedades](/docs/components-and-props.html) son la única forma en la que los componentes padres pueden interactuar con sus hijos. Para modificar un hijo, vuelves a renderizarlo con propiedades nuevas. Sin embargo, hay ciertos casos donde necesitarás modificar imperativamente un hijo fuera del flujo de datos tipico. El hijo a ser modificado puede ser una instancia de un componente React, o puede ser un elemento del DOM. Para ambos casos, React proporciona una via de escape. ### Cuando Usar Referencias @@ -209,7 +209,7 @@ React tambien ofrece otra manera de agregar referencias con "referencias mediant En lugar de pasar un atributo a `ref` creado por `createRef()`, pasas una función. La función recibe la instancia del componente React o el elemento DOM del HTML como su argumento, que puede ser guardado y accedido desde otros lugares. -El ejemplo a continuación implementa un patrón común: usar el `ref` mediante callback para guardar una referencia al nodo del DOM en una propiedad de la instancia. +El ejemplo a continuación implementa un patrón común: usar el `ref` mediante un callback para guardar una referencia al nodo del DOM en una propiedad de la instancia. ```javascript{5,7-9,11-14,19,29,34} class CustomTextInput extends React.Component { @@ -253,9 +253,9 @@ class CustomTextInput extends React.Component { } ``` -React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts. Refs are guaranteed to be up-to-date before `componentDidMount` or `componentDidUpdate` fires. +React llamara al callback del `ref` con el elemento del DOM cuando el componente sea montado, y lo llamara con `null` cuando este se desmonte. Se asegura que las referencias seran actualizadas antes que el `componentDidMount` o el `componentDidUpdate` sean ejecutados. -You can pass callback refs between components like you can with object refs that were created with `React.createRef()`. +Puedes pasar una referencia mediante callback entre componentes tal como puedes con los objetos de referencias creados con `React.createRef()` ```javascript{4,13} function CustomTextInput(props) { @@ -277,16 +277,16 @@ class Parent extends React.Component { } ``` -In the example above, `Parent` passes its ref callback as an `inputRef` prop to the `CustomTextInput`, and the `CustomTextInput` passes the same function as a special `ref` attribute to the ``. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `` element in the `CustomTextInput`. +En el ejemplo de arriba, `Parent` pasa su referencia mediante callback como una propiedad `inputRef` al `CustomTextInput`, y el componente `CustomTextInput` pasa la misma funcion como un atributo especial `ref` al ``. Como resultado, `this.inputElement` en el `Parent` sera asignado con el nodo del DOM correspondiente al elemento `input` del `CustomTextInput`. -### Legacy API: String Refs +### API Antigua: Referencias mediante Cadena de Texto -If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**. +Si trabajaste con React antes, puede que estes familiarizado con un API antigua donde el atributo `ref` es una cadena de texto, justo como `"textInput"`, y el nodo del DOM es accedido como `this.refs.textInput`. No recomendamos usar esto, ya que las referencias mediante cadenas de texto tiene [ciertos problemas](https://github.com/facebook/react/pull/8333#issuecomment-271648615), son consideradas antiguas, y **posiblemente seran removidas en uno de los futuros lanzamientos**. -> Note +> Nota > -> If you're currently using `this.refs.textInput` to access refs, we recommend using either the [callback pattern](#callback-refs) or the [`createRef` API](#creating-refs) instead. +> Si estas considerando usar `this.refs.textInput` para acceder a las referencias, recomendamos que uses en su lugar o bien [referencias mediante callback](#callback-refs) o [el API `createRef`](#creating-refs). -### Caveats with callback refs +### Advertencias sobre Referencias mediante Callback -If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null` and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the `ref` callback as a bound method on the class, but note that it shouldn't matter in most cases. +Si el callback de `ref` es definido como una *arrow function*, esta sera llamada 2 veces durante las actualizaciones, la primera con `null` y de nuevo con el elemento DOM correspondiente. Esto se debe a que una nueva instancia de la funcion es creada en cada renderizado, por lo que React necesita limpiar la referencia vieja y agregar la nueva. Puedes evitar esto definiendo el callback del `ref` como un metodo en la clase, pero recuerda que no deberia importar en la mayoria de los casos. \ No newline at end of file From e01dcff24153c78a61d38c84f1da9633477d181a Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Sat, 9 Feb 2019 12:14:06 -0400 Subject: [PATCH 5/8] Working on translation grammar and orthography --- content/docs/refs-and-the-dom.md | 40 +++++++++++++++----------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 828d84fe7..aec279767 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -13,7 +13,7 @@ permalink: docs/refs-and-the-dom.html Las referencias proporcionan una forma de acceder a los nodos del DOM o a elementos React creados en el método de renderizado. -En un flujo normal de datos de React, [las propiedades](/docs/components-and-props.html) son la única forma en la que los componentes padres pueden interactuar con sus hijos. Para modificar un hijo, vuelves a renderizarlo con propiedades nuevas. Sin embargo, hay ciertos casos donde necesitarás modificar imperativamente un hijo fuera del flujo de datos tipico. El hijo a ser modificado puede ser una instancia de un componente React, o puede ser un elemento del DOM. Para ambos casos, React proporciona una via de escape. +En un flujo normal en datos de React, [las propiedades](/docs/components-and-props.html) son la única forma en la que los componentes padres pueden interactuar con sus hijos. Para modificar un hijo, vuelves a renderizarlo con propiedades nuevas. Sin embargo, hay ciertos casos donde necesitarás modificar imperativamente un hijo fuera del flujo de datos típico. El hijo a ser modificado puede ser una instancia de un componente React, o un elemento del DOM. Para ambos casos, React proporciona una via de escape. ### Cuando Usar Referencias @@ -23,9 +23,9 @@ Existen unos cuantos buenos casos de uso para referencias: * Activar animaciones imperativas. * Integración con librerías DOM de terceros. -Evita el uso de referencias en cualquier cosa que pueda ser hecha declarativamente. +Evita usar referencias en cualquier cosa que pueda ser hecha declarativamente. -Por ejemplo, en lugar de exponer los métodos `open()` y `close()` a un componente `Dialog`, pasa una propiedad `isOpen` a este en su lugar. +Por ejemplo, en lugar de exponer los métodos `open()` y `close()` en un componente `Dialog`, pasa una propiedad `isOpen` a este en su lugar. ### No Abuses de las Referencias @@ -37,7 +37,7 @@ Tu primer pensamiento puede ser usar referencias para "hacer que las cosas funci ### Creando Referencias -Las referencias son creadas usando `React.createRef()` y agregandolas a elementos React mediante el atributo `ref`. Las referencias son asignadas comunmente a una propiedad de instancia cuando un componente es construido, así puede ser referenciados mediante el componente. +Las referencias son creadas usando `React.createRef()` y agregandolas a elementos de React mediante el atributo `ref`. Las referencias son asignadas comunmente a una propiedad de instancia cuando un componente es construido, así puede ser referenciados mediante el componente. ```javascript{4,7} class MyComponent extends React.Component { @@ -67,23 +67,21 @@ El valor de la referencia es diferente dependiendo del tipo de nodo: Los ejemplos a continuación demuestran las diferencias. -#### Agregando una Referencia a un elemnto del DOM +#### Agregando una Referencia a un elemento del DOM Esta código utiliza un `ref` para guardar una referencia al nodo del DOM: -This code uses a `ref` to store a reference to a DOM node: - ```javascript{5,12,22} class CustomTextInput extends React.Component { constructor(props) { super(props); - // crea una referencia para guardar el elemento textInput del DOM + // Crea una referencia para guardar el elemento textInput del DOM this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } focusTextInput() { - // Hace enfoque explicitamente del campo de texto haciendo uso de un API del DOM + // Hace enfoque explícitamente del campo de texto, haciendo uso de un API del DOM // Nota: Estamos accediendo la propiedad "current" para obtener el nodo del DOM this.textInput.current.focus(); } @@ -111,7 +109,7 @@ React asignará a la propiedad `current` el elemento del DOM cuando el component #### Agregando una Referencia a un Componente de Clase -Si quisieramos envolver el `CustomTextInput` de más arriba para simular que esta siendo clickeado despues de montarse, podríamos utilizar una referencia para obtener acceso al input personalizado y llamar a su método `focusTextInput` manualmente: +Si quisiéramos envolver el `CustomTextInput` de arriba para simular sobre este un click después de montarse, podríamos utilizar una referencia para obtener acceso al input personalizado y llamar a su método `focusTextInput` manualmente: ```javascript{4,8,13} class AutoFocusTextInput extends React.Component { @@ -163,13 +161,13 @@ class Parent extends React.Component { } ``` -Tienes que convertir el componente a una clase si necesitas utilizar una referencia en el, justo como cuando necesitas mëtodos del ciclo de vida, o utilizar estado. +Tienes que convertir el componente a una clase si necesitas utilizar una referencia en el, justo como cuando necesitas métodos del ciclo de vida del componente, o utilizar estado. Sin embargo, puedes **usar el atributo `ref` dentro de un componente de función** siempre y cuando hagas referencia de un elemento del DOM o de un componente de clase. ```javascript{2,3,6,13} function CustomTextInput(props) { - // textInput debe estar declarado aquí para que *ref* pueda referenciarlo + // textInput debe estar declarado aquí para que *ref* pueda hacer referencia a este let textInput = React.createRef(); function handleClick() { @@ -193,19 +191,19 @@ function CustomTextInput(props) { ### Exponiendo Referencias del DOM a Componentes Padres -En casos raros, puede que necesites acceder al nodo DOM de un hijo desde un componente padre. Esto generalmente no es recomendado porque rompe con la encapsulación del componente, pero puede ser utíl ocacionalmente para hacer enfoque, o medir el tamaño o posición de un nodo hijo del DOM. +En casos raros, puede que necesites acceder al nodo DOM de un hijo desde un componente padre. Esto generalmente no es recomendado porque rompe con la encapsulación del componente, pero puede ser util ocasionalmente para hacer enfoque, o medir el tamaño o posición de un nodo hijo del DOM. Bien podrías [agregar una referencia al componente hijo](#adding-a-ref-to-a-class-component), esta no es la solución ideal, porque lo que obtendrías sería la instancia del componente en vez del nodo del DOM. Adicionalmente, esto no funcionaría con componentes de función. Si usas React 16.3 o una versión mayor, recomendamos usar [paso de referencias](/docs/forwarding-refs.html) para estos casos. **Paso de referencias permite que los componentes decidan exponer cualquier referencia de sus hijos como si fuera la suya**. Puedes encontrar un ejemplo detallado de como exponer los nodos DOM de los hijos a un componente padre [en la documentación de paso de referencias](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). -Si usas React 16.2 o una versión más antigua, o si necesitas más flexibilidad de la que provee el paso de referencias, puedes utilizar [este enfoque alternativo](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) y pasar explicitamente una referencia como una propiedad nombrada diferente. +Si usas React 16.2 o una versión más antigua, o si necesitas más flexibilidad de la que provee el paso de referencias, puedes utilizar [este enfoque alternativo](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) y pasar explícitamente una referencia como una propiedad nombrada diferente. -Cuando sea posible, recomendamos no exponer los nodos del DOM, pero puede ser utíl como una vía de escape. Recuerda que este enfoque require que agregues código al componente hijo. Si no tienes control alguno sobre la implementación del componente hijo, tu ultima opción es usar [`findDOMNode()`](/docs/react-dom.html#finddomnode), pero esto no es recomendado, y esta dspreciado en modo estricto: [`(StrictMode)`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). +Siempre que sea posible, recomendamos no exponer los nodos del DOM, pero puede ser util como una vía de escape. Recuerda que este enfoque require que agregues código al componente hijo. Si no tienes control alguno sobre la implementación del componente hijo, tu ultima opción es usar [`findDOMNode()`](/docs/react-dom.html#finddomnode), pero esto no es recomendado, y esta despreciado en modo estricto: [`(StrictMode)`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). ### Referencias mediante Callback -React tambien ofrece otra manera de agregar referencias con "referencias mediante callback", que da un control mas detallado sobre cuando las referencias son establecidas o no. +React también ofrece otra manera de agregar referencias con "referencias mediante callback", que da un control mas detallado sobre cuando las referencias son establecidas o no. En lugar de pasar un atributo a `ref` creado por `createRef()`, pasas una función. La función recibe la instancia del componente React o el elemento DOM del HTML como su argumento, que puede ser guardado y accedido desde otros lugares. @@ -223,13 +221,13 @@ class CustomTextInput extends React.Component { }; this.focusTextInput = () => { - // Hace enfoque del campo de texto usando un mëtodo propio del DOM + // Hace enfoque del campo de texto usando un método propio del DOM if (this.textInput) this.textInput.focus(); }; } componentDidMount() { - // Auto enfoca el campo despues de que el componente se monta + // Auto enfoca el campo después de que el componente se monta this.focusTextInput(); } @@ -253,7 +251,7 @@ class CustomTextInput extends React.Component { } ``` -React llamara al callback del `ref` con el elemento del DOM cuando el componente sea montado, y lo llamara con `null` cuando este se desmonte. Se asegura que las referencias seran actualizadas antes que el `componentDidMount` o el `componentDidUpdate` sean ejecutados. +React llamara al callback del `ref` con el elemento del DOM cuando el componente sea montado, y lo llamara con `null` cuando este se desmonte. Se asegura que las referencias serán actualizadas antes que el `componentDidMount` o el `componentDidUpdate` sean ejecutados. Puedes pasar una referencia mediante callback entre componentes tal como puedes con los objetos de referencias creados con `React.createRef()` @@ -281,7 +279,7 @@ En el ejemplo de arriba, `Parent` pasa su referencia mediante callback como una ### API Antigua: Referencias mediante Cadena de Texto -Si trabajaste con React antes, puede que estes familiarizado con un API antigua donde el atributo `ref` es una cadena de texto, justo como `"textInput"`, y el nodo del DOM es accedido como `this.refs.textInput`. No recomendamos usar esto, ya que las referencias mediante cadenas de texto tiene [ciertos problemas](https://github.com/facebook/react/pull/8333#issuecomment-271648615), son consideradas antiguas, y **posiblemente seran removidas en uno de los futuros lanzamientos**. +Si trabajaste con React antes, puede que estes familiarizado con un API antigua donde el atributo `ref` es una cadena de texto, justo como `"textInput"`, y el nodo del DOM es accedido como `this.refs.textInput`. No recomendamos usar esto, ya que las referencias mediante cadenas de texto tienen [ciertos problemas](https://github.com/facebook/react/pull/8333#issuecomment-271648615), son consideradas antiguas, y **posiblemente seran removidas en una de las futuras versiones**. > Nota > @@ -289,4 +287,4 @@ Si trabajaste con React antes, puede que estes familiarizado con un API antigua ### Advertencias sobre Referencias mediante Callback -Si el callback de `ref` es definido como una *arrow function*, esta sera llamada 2 veces durante las actualizaciones, la primera con `null` y de nuevo con el elemento DOM correspondiente. Esto se debe a que una nueva instancia de la funcion es creada en cada renderizado, por lo que React necesita limpiar la referencia vieja y agregar la nueva. Puedes evitar esto definiendo el callback del `ref` como un metodo en la clase, pero recuerda que no deberia importar en la mayoria de los casos. \ No newline at end of file +Si el callback de `ref` es definido como una *arrow function*, esta sera llamada 2 veces durante las actualizaciones, la primera con `null`, y de nuevo con el elemento DOM correspondiente. Esto se debe a que una nueva instancia de la funcion es creada en cada renderizado, por lo que React necesita limpiar la referencia vieja y agregar la nueva. Puedes evitar esto definiendo el callback del `ref` como un metodo en la clase, pero recuerda que no deberia importar en la mayoria de los casos. \ No newline at end of file From aee8b301f92a9f62c2abe23d2e2e878d1f6a5e44 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Sat, 9 Feb 2019 12:34:17 -0400 Subject: [PATCH 6/8] Finishing checking translation, and some orthography and link errors --- content/docs/refs-and-the-dom.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index aec279767..e5c47cd6c 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -33,11 +33,11 @@ Tu primer pensamiento puede ser usar referencias para "hacer que las cosas funci > Nota > -> Los ejemplos a continuación han sido actualizados para hacer uso del API `React.createRef()` introducido en React 16.3. Si estas usando una versión de React anterior a esta, recomendamos usar en su lugar [referencias mediante callback](#callback-refs). +> Los ejemplos a continuación han sido actualizados para hacer uso del API `React.createRef()` introducido en React 16.3. Si estas usando una versión de React anterior a esta, recomendamos usar en su lugar [referencias mediante callback](#referencias-mediante-callback). ### Creando Referencias -Las referencias son creadas usando `React.createRef()` y agregandolas a elementos de React mediante el atributo `ref`. Las referencias son asignadas comunmente a una propiedad de instancia cuando un componente es construido, así puede ser referenciados mediante el componente. +Las referencias son creadas usando `React.createRef()` y agregandolas a elementos de React mediante el atributo `ref`. Las referencias son asignadas comunmente a una propiedad de instancia cuando un componente es construido, así pueden ser referenciadas por el componente. ```javascript{4,7} class MyComponent extends React.Component { @@ -67,7 +67,7 @@ El valor de la referencia es diferente dependiendo del tipo de nodo: Los ejemplos a continuación demuestran las diferencias. -#### Agregando una Referencia a un elemento del DOM +### Agregando una Referencia a un elemento del DOM Esta código utiliza un `ref` para guardar una referencia al nodo del DOM: @@ -105,7 +105,7 @@ class CustomTextInput extends React.Component { } ``` -React asignará a la propiedad `current` el elemento del DOM cuando el componente sea montado, y la asignará de nuevo `null` cuando sea desmontado. La `referencia` es actualizada antes de los métodos `componentDidMount` or `componentDidUpdate`. +React asignará a la propiedad `current` el elemento del DOM cuando el componente sea montado, y la asignará de nuevo `null` cuando sea desmontado. La `referencia` es actualizada antes de los métodos `componentDidMount` o `componentDidUpdate`. #### Agregando una Referencia a un Componente de Clase @@ -191,13 +191,13 @@ function CustomTextInput(props) { ### Exponiendo Referencias del DOM a Componentes Padres -En casos raros, puede que necesites acceder al nodo DOM de un hijo desde un componente padre. Esto generalmente no es recomendado porque rompe con la encapsulación del componente, pero puede ser util ocasionalmente para hacer enfoque, o medir el tamaño o posición de un nodo hijo del DOM. +En casos raros, puede que necesites acceder al nodo DOM de un hijo desde un componente padre. Esto generalmente no es recomendado porque rompe con la encapsulación del componente, pero puede ser util ocasionalmente para hacer enfoque, o medir el tamaño o posición de un nodo del DOM hijo. -Bien podrías [agregar una referencia al componente hijo](#adding-a-ref-to-a-class-component), esta no es la solución ideal, porque lo que obtendrías sería la instancia del componente en vez del nodo del DOM. Adicionalmente, esto no funcionaría con componentes de función. +Bien podrías [agregar una referencia al componente hijo](#agregando-una-referencia-a-un-componente-de-clase), esta no es la solución ideal, porque lo que obtendrías sería la instancia del componente en vez del nodo del DOM. Adicionalmente, esto no funcionaría con componentes de función. Si usas React 16.3 o una versión mayor, recomendamos usar [paso de referencias](/docs/forwarding-refs.html) para estos casos. **Paso de referencias permite que los componentes decidan exponer cualquier referencia de sus hijos como si fuera la suya**. Puedes encontrar un ejemplo detallado de como exponer los nodos DOM de los hijos a un componente padre [en la documentación de paso de referencias](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). -Si usas React 16.2 o una versión más antigua, o si necesitas más flexibilidad de la que provee el paso de referencias, puedes utilizar [este enfoque alternativo](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) y pasar explícitamente una referencia como una propiedad nombrada diferente. +Si usas React 16.2 o una versión más antigua, o si necesitas más flexibilidad de la que ofrece el paso de referencias, puedes utilizar [este enfoque alternativo](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) y pasar explícitamente una referencia como una propiedad nombrada diferente. Siempre que sea posible, recomendamos no exponer los nodos del DOM, pero puede ser util como una vía de escape. Recuerda que este enfoque require que agregues código al componente hijo. Si no tienes control alguno sobre la implementación del componente hijo, tu ultima opción es usar [`findDOMNode()`](/docs/react-dom.html#finddomnode), pero esto no es recomendado, y esta despreciado en modo estricto: [`(StrictMode)`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). @@ -283,8 +283,8 @@ Si trabajaste con React antes, puede que estes familiarizado con un API antigua > Nota > -> Si estas considerando usar `this.refs.textInput` para acceder a las referencias, recomendamos que uses en su lugar o bien [referencias mediante callback](#callback-refs) o [el API `createRef`](#creating-refs). +> Si estas considerando usar `this.refs.textInput` para acceder a las referencias, recomendamos que uses en su lugar o bien [referencias mediante callback](#referencias-mediante-callback) o [el API `createRef`](#creando-referencias). ### Advertencias sobre Referencias mediante Callback -Si el callback de `ref` es definido como una *arrow function*, esta sera llamada 2 veces durante las actualizaciones, la primera con `null`, y de nuevo con el elemento DOM correspondiente. Esto se debe a que una nueva instancia de la funcion es creada en cada renderizado, por lo que React necesita limpiar la referencia vieja y agregar la nueva. Puedes evitar esto definiendo el callback del `ref` como un metodo en la clase, pero recuerda que no deberia importar en la mayoria de los casos. \ No newline at end of file +Si el callback de `ref` es definido como una *arrow function*, esta sera llamada 2 veces durante las actualizaciones, la primera con `null`, y la siguiente con el elemento DOM correspondiente. Esto se debe a que una nueva instancia de la funcion es creada en cada renderizado, por lo que React necesita limpiar la referencia vieja y agregar la nueva. Puedes evitar esto definiendo el callback del `ref` como un metodo en la clase, pero recuerda que no deberia importar en la mayoria de los casos. \ No newline at end of file From c525037fd67fb91664cc24316923910cac9f99b2 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Tue, 12 Feb 2019 09:18:00 -0400 Subject: [PATCH 7/8] Adding missing dot at the end of line --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 9065af9e2..f6da21b75 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -253,7 +253,7 @@ class CustomTextInput extends React.Component { React llamara al callback del `ref` con el elemento del DOM cuando el componente sea montado, y lo llamara con `null` cuando este se desmonte. Se asegura que las referencias serán actualizadas antes que el `componentDidMount` o el `componentDidUpdate` sean ejecutados. -Puedes pasar una referencia mediante callback entre componentes tal como puedes con los objetos de referencias creados con `React.createRef()` +Puedes pasar una referencia mediante callback entre componentes tal como puedes con los objetos de referencias creados con `React.createRef()`. ```javascript{4,13} function CustomTextInput(props) { From 1e096ffb8c00504febbe4d55d0d922efea6052ac Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Tue, 12 Feb 2019 09:22:08 -0400 Subject: [PATCH 8/8] Adding dot in the correct place, typo --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index f6da21b75..04b7fc247 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -253,7 +253,7 @@ class CustomTextInput extends React.Component { React llamara al callback del `ref` con el elemento del DOM cuando el componente sea montado, y lo llamara con `null` cuando este se desmonte. Se asegura que las referencias serán actualizadas antes que el `componentDidMount` o el `componentDidUpdate` sean ejecutados. -Puedes pasar una referencia mediante callback entre componentes tal como puedes con los objetos de referencias creados con `React.createRef()`. +Puedes pasar una referencia mediante callback entre componentes tal como puedes con los objetos de referencias creados con `React.createRef().` ```javascript{4,13} function CustomTextInput(props) {