From cc20df56aa8f09a22eed48f68dd009cf1339417c Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 3 Jan 2023 23:58:43 -0500 Subject: [PATCH 1/6] translate reference and exposing a custom ref handle to the parent component --- .../reference/react/useImperativeHandle.md | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/beta/src/content/reference/react/useImperativeHandle.md b/beta/src/content/reference/react/useImperativeHandle.md index bf09c4ef8..af99bdd50 100644 --- a/beta/src/content/reference/react/useImperativeHandle.md +++ b/beta/src/content/reference/react/useImperativeHandle.md @@ -4,7 +4,7 @@ title: useImperativeHandle -`useImperativeHandle` is a React Hook that lets you customize the handle exposed as a [ref.](/learn/manipulating-the-dom-with-refs) +`useImperativeHandle` es un Hook de React que te permite personalizar el manejador expuesto como una [ref.](/learn/manipulating-the-dom-with-refs) ```js useImperativeHandle(ref, createHandle, dependencies?) @@ -16,11 +16,11 @@ useImperativeHandle(ref, createHandle, dependencies?) --- -## Reference {/*reference*/} +## Referencia {/*reference*/} ### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/} -Call `useImperativeHandle` at the top level of your component to customize the ref handle it exposes: +Llama a `useImperativeHandle` en el nivel superior de tu componente para personalizar el manejador de ref que se expone: ```js import { forwardRef, useImperativeHandle } from 'react'; @@ -28,33 +28,33 @@ import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { - // ... your methods ... + // ... Tus métodos ... }; }, []); // ... ``` -[See more examples below.](#usage) +[Mira mas ejemplos abajo.](#usage) -#### Parameters {/*parameters*/} +#### Parámetros {/*parameters*/} -* `ref`: The `ref` you received as the second argument from the [`forwardRef` render function.](/reference/react/forwardRef#render-function) +* `ref`: La `ref` que recibes como segundo argumento de la [función render `forwardRef`](/reference/react/forwardRef#render-function) -* `createHandle`: A function that takes no arguments and returns the ref handle you want to expose. The ref handle you return can have any type. Usually, you will return an object with the methods you want to expose. +* `createHandle`: Una función que no toma argumentos y devuelve el manejador de ref que quieres exponer. El manejador de ref que devuelve puede tener cualquier tipo. Por lo general, devolverá un objeto con lo métodos que quieres exponer. -* **optional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If a re-render resulted in a change to some dependency, or if you did not specify the dependencies at all, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref. +* `dependencies` **opcional**: La lista de todos los valores reactivos a los que se hace referencia dentro del código de `createHandle`. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es [configurado por React](/learn/editor-setup#linting), va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función `createHandle` se volverá a ejecutar, y el nuevo manejador recien creado será asignado a ref. -#### Returns {/*returns*/} +#### Devuelve {/*returns*/} -`useImperativeHandle` returns `undefined`. +`useImperativeHandle` devuelve `undefined`. --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Exposing a custom ref handle to the parent component {/*exposing-a-custom-ref-handle-to-the-parent-component*/} +### Exponiendo un manejador de ref personalizado al componente padre {/*exposing-a-custom-ref-handle-to-the-parent-component*/} -By default, components don't expose their DOM nodes to parent components. For example, if you want the parent component of `MyInput` to [have access](/learn/manipulating-the-dom-with-refs) to the `` DOM node, you have to opt in with [`forwardRef`:](/reference/react/forwardRef) +Por defecto, los componentes no exponen sus nodos del DOM a los componentes padre. Por ejemplo, si quieres el componente padre de `MyInput` para [tener acceso](/learn/manipulating-the-dom-with-refs) al nodo DOM de ``, tienes que optar por [`forwardRef`:](/reference/react/forwardRef) ```js {4} import { forwardRef } from 'react'; @@ -64,7 +64,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -With the code above, [a ref to `MyInput` will receive the `` DOM node.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component: +Con el código de arriba, [una ref a `MyInput` va a recibir el nodo DOM de ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Aun así, puedes exponer un valor personalizado en su lugar. Para personalizar el manejador expuesto, llama a `useImperativeHandle` en el nivel superior de tu componente: ```js {4-8} import { forwardRef, useImperativeHandle } from 'react'; @@ -72,7 +72,7 @@ import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { - // ... your methods ... + // ... Tus métodos ... }; }, []); @@ -80,9 +80,9 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Note that in the code above, the `ref` is no longer forwarded to the ``. +Ten en cuenta que en el código de arriba, La `ref` ya no se reenvía a ``. -For example, suppose you don't want to expose the entire `` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call: +Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de ``, pero quieres exponer dos de sus métodos: `focus` y `scrollIntoView`. para hacer esto, manten el DOM real del buscador en un ref separado. Entonces usa `useImperativeHandle` para exponer un handle solamente con los métodos que quieres que el componente padre llame: ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Now, if the parent component gets a ref to `MyInput`, it will be able to call the `focus` and `scrollIntoView` methods on it. However, it will not have full access to the underlying `` DOM node. +Ahora, si el componente padre obtiene una ref a `MyInput`, podrá llamar a los métodos `focus` y `scrollIntoView` en él. Sin embargo, no va a tener acceso completo al nodo DOM de `` subyacente. From cebd287e7bca3bc83adfb8abf90b913717b2178c Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 5 Jan 2023 01:02:07 -0500 Subject: [PATCH 2/6] add translation for Exposing your own imperative methods --- .../reference/react/useImperativeHandle.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/beta/src/content/reference/react/useImperativeHandle.md b/beta/src/content/reference/react/useImperativeHandle.md index af99bdd50..606216aa4 100644 --- a/beta/src/content/reference/react/useImperativeHandle.md +++ b/beta/src/content/reference/react/useImperativeHandle.md @@ -82,7 +82,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { Ten en cuenta que en el código de arriba, La `ref` ya no se reenvía a ``. -Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de ``, pero quieres exponer dos de sus métodos: `focus` y `scrollIntoView`. para hacer esto, manten el DOM real del buscador en un ref separado. Entonces usa `useImperativeHandle` para exponer un handle solamente con los métodos que quieres que el componente padre llame: +Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de ``, pero quieres exponer dos de sus métodos: `focus` y `scrollIntoView`. Para hacer esto, manten el DOM real del navegador en un ref separado. Entonces usa `useImperativeHandle` para exponer un handle solamente con los métodos que quieres que el componente padre llame: ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -118,7 +118,7 @@ export default function Form() { function handleClick() { ref.current.focus(); - // This won't work because the DOM node isn't exposed: + //Esto no funcionará porque el nodo del DOM no está expuesto // ref.current.style.opacity = 0.5; } @@ -166,9 +166,9 @@ input { --- -### Exposing your own imperative methods {/*exposing-your-own-imperative-methods*/} +### Exponiendo tus propios métodos imperativos {/*exposing-your-own-imperative-methods*/} -The methods you expose via an imperative handle don't have to match the DOM methods exactly. For example, the `Post` component in the example below exposes a `scrollAndFocusAddComment` method via an imperative handle. This lets the parent `Page` scroll the list of comments *and* focus the input field when you click the button: +Los métodos que expones via manejador imperativo no tienen que coincidir exactamente a los métodos del DOM. Por ejemplo, el componente `Post` en el ejemplo de abajo expone a `scrollAndFocusAddComment` por medio de un manejador imperativo. Esto le permite a la `Página` padre desplazar la lista de comentarios *y* enfocar el campo de entrada cuando haces click al botón. @@ -186,7 +186,7 @@ export default function Page() { return ( <> @@ -215,7 +215,7 @@ const Post = forwardRef((props, ref) => { return ( <>
-

Welcome to my blog!

+

Bienvenidos a mi blog!

@@ -244,7 +244,7 @@ const CommentList = forwardRef(function CommentList(props, ref) { let comments = []; for (let i = 0; i < 50; i++) { - comments.push(

Comment #{i}

); + comments.push(

Comentario #{i}

); } return ( @@ -261,7 +261,7 @@ export default CommentList; import { forwardRef, useRef, useImperativeHandle } from 'react'; const AddComment = forwardRef(function AddComment(props, ref) { - return ; + return ; }); export default AddComment; @@ -281,8 +281,8 @@ export default AddComment; -**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on. +**No sobre utilices las refs.** Solo debes usar las refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo desplazarse a un nodo, enfocar un nodo, activar una animación, seleccionar texto, etcétera. -**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like ``. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props. +**Si puedes expresar algo como un prop, no deberias usar una ref.** Por ejemplo, en vez de exponer un manejador imperativo como `{ open, close }` del componente `Modal`, es mejor tomar `isOpen` como un prop, algo como ``. [Efectos](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos via props. From 488f95c142a4c19fbcb567f70eb19da37ea07862 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 5 Jan 2023 18:24:32 -0500 Subject: [PATCH 3/6] modify translation manipular to identificador --- .../reference/react/useImperativeHandle.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/beta/src/content/reference/react/useImperativeHandle.md b/beta/src/content/reference/react/useImperativeHandle.md index 606216aa4..7c53e226a 100644 --- a/beta/src/content/reference/react/useImperativeHandle.md +++ b/beta/src/content/reference/react/useImperativeHandle.md @@ -4,7 +4,7 @@ title: useImperativeHandle -`useImperativeHandle` es un Hook de React que te permite personalizar el manejador expuesto como una [ref.](/learn/manipulating-the-dom-with-refs) +`useImperativeHandle` es un Hook de React que te permite personalizar el identificador expuesto como un [ref.](/learn/manipulating-the-dom-with-refs) ```js useImperativeHandle(ref, createHandle, dependencies?) @@ -20,7 +20,7 @@ useImperativeHandle(ref, createHandle, dependencies?) ### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/} -Llama a `useImperativeHandle` en el nivel superior de tu componente para personalizar el manejador de ref que se expone: +Llama a `useImperativeHandle` en el nivel superior de tu componente para personalizar el identificador ref que se expone: ```js import { forwardRef, useImperativeHandle } from 'react'; @@ -34,15 +34,15 @@ const MyInput = forwardRef(function MyInput(props, ref) { // ... ``` -[Mira mas ejemplos abajo.](#usage) +[Mira más ejemplos debajo.](#usage) #### Parámetros {/*parameters*/} -* `ref`: La `ref` que recibes como segundo argumento de la [función render `forwardRef`](/reference/react/forwardRef#render-function) +* `ref`: El `ref` que recibes como segundo argumento de la [función render `forwardRef`](/reference/react/forwardRef#render-function) -* `createHandle`: Una función que no toma argumentos y devuelve el manejador de ref que quieres exponer. El manejador de ref que devuelve puede tener cualquier tipo. Por lo general, devolverá un objeto con lo métodos que quieres exponer. +* `createHandle`: Una función que no toma argumentos y devuelve el identificador ref que quieres exponer. El identificador ref que devuelve puede tener cualquier tipo. Por lo general, devolverá un objeto con lo métodos que quieres exponer. -* `dependencies` **opcional**: La lista de todos los valores reactivos a los que se hace referencia dentro del código de `createHandle`. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es [configurado por React](/learn/editor-setup#linting), va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función `createHandle` se volverá a ejecutar, y el nuevo manejador recien creado será asignado a ref. +* `dependencies` **opcional**: La lista de todos los valores reactivos a los que se hace referencia dentro del código de `createHandle`. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es [configurado por React](/learn/editor-setup#linting), va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función `createHandle` se volverá a ejecutar, y el nuevo identificador recien creado será asignado a ref. #### Devuelve {/*returns*/} @@ -52,9 +52,9 @@ const MyInput = forwardRef(function MyInput(props, ref) { ## Uso {/*usage*/} -### Exponiendo un manejador de ref personalizado al componente padre {/*exposing-a-custom-ref-handle-to-the-parent-component*/} +### Exponiendo un identificador ref personalizado al componente padre {/*exposing-a-custom-ref-handle-to-the-parent-component*/} -Por defecto, los componentes no exponen sus nodos del DOM a los componentes padre. Por ejemplo, si quieres el componente padre de `MyInput` para [tener acceso](/learn/manipulating-the-dom-with-refs) al nodo DOM de ``, tienes que optar por [`forwardRef`:](/reference/react/forwardRef) +Los componentes por defecto no exponen sus nodos DOM a los componentes padre. Por ejemplo, si quieres el componente padre de `MyInput` para [tener acceso](/learn/manipulating-the-dom-with-refs) al nodo DOM de ``, tienes que optar por [`forwardRef`:](/reference/react/forwardRef) ```js {4} import { forwardRef } from 'react'; @@ -64,7 +64,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Con el código de arriba, [una ref a `MyInput` va a recibir el nodo DOM de ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Aun así, puedes exponer un valor personalizado en su lugar. Para personalizar el manejador expuesto, llama a `useImperativeHandle` en el nivel superior de tu componente: +Con el código de arriba, [un ref a `MyInput` va a recibir el nodo DOM de ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Aun así, puedes exponer un valor personalizado en su lugar. Para personalizar el identificador expuesto, llama a `useImperativeHandle` en el nivel superior de tu componente: ```js {4-8} import { forwardRef, useImperativeHandle } from 'react'; @@ -80,9 +80,9 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Ten en cuenta que en el código de arriba, La `ref` ya no se reenvía a ``. +Ten en cuenta que en el código de arriba, el `ref` ya no se reenvía a ``. -Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de ``, pero quieres exponer dos de sus métodos: `focus` y `scrollIntoView`. Para hacer esto, manten el DOM real del navegador en un ref separado. Entonces usa `useImperativeHandle` para exponer un handle solamente con los métodos que quieres que el componente padre llame: +Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de ``, pero quieres exponer dos de sus métodos: `focus` y `scrollIntoView`. Para hacer esto, mantén el DOM real del navegador en un ref separado. Entonces usa `useImperativeHandle` para exponer un identificador solamente con los métodos que quieres que el componente padre llame: ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Ahora, si el componente padre obtiene una ref a `MyInput`, podrá llamar a los métodos `focus` y `scrollIntoView` en él. Sin embargo, no va a tener acceso completo al nodo DOM de `` subyacente. +Ahora, si el componente padre obtiene un ref a `MyInput`, podrá llamar a los métodos `focus` y `scrollIntoView` en él. Sin embargo, no va a tener acceso completo al nodo DOM de `` de manera mas profunda. @@ -118,7 +118,7 @@ export default function Form() { function handleClick() { ref.current.focus(); - //Esto no funcionará porque el nodo del DOM no está expuesto + //Esto no funcionará porque el nodo DOM no está expuesto // ref.current.style.opacity = 0.5; } @@ -126,7 +126,7 @@ export default function Form() {
); @@ -168,7 +168,7 @@ input { ### Exponiendo tus propios métodos imperativos {/*exposing-your-own-imperative-methods*/} -Los métodos que expones via manejador imperativo no tienen que coincidir exactamente a los métodos del DOM. Por ejemplo, el componente `Post` en el ejemplo de abajo expone a `scrollAndFocusAddComment` por medio de un manejador imperativo. Esto le permite a la `Página` padre desplazar la lista de comentarios *y* enfocar el campo de entrada cuando haces click al botón. +Los métodos que expones via identificador imperativo no tienen que coincidir exactamente a los métodos del DOM. Por ejemplo, el componente `Post` en el ejemplo de abajo expone a `scrollAndFocusAddComment` por medio de un identificador imperativo. Esto le permite a la `Página` padre desplazar la lista de comentarios *y* enfocar el campo de entrada cuando haces click al botón. @@ -281,8 +281,8 @@ export default AddComment; -**No sobre utilices las refs.** Solo debes usar las refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo desplazarse a un nodo, enfocar un nodo, activar una animación, seleccionar texto, etcétera. +**No sobreutilizar los refs.** Solo debes usar los refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo desplazarse a un nodo, enfocar un nodo, activar una animación, seleccionar texto, etc. -**Si puedes expresar algo como un prop, no deberias usar una ref.** Por ejemplo, en vez de exponer un manejador imperativo como `{ open, close }` del componente `Modal`, es mejor tomar `isOpen` como un prop, algo como ``. [Efectos](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos via props. +**Si puedes expresar algo como un prop, no deberias usar un ref.** Por ejemplo, en vez de exponer un identificador imperativo como `{ open, close }` del componente `Modal`, es mejor tomar `isOpen` como un prop, algo como ``. [Efectos](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos via props. From bab20a65566e441872c4e60087e215a2310b2cee Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 5 Jan 2023 19:15:23 -0500 Subject: [PATCH 4/6] minimal change changes --- beta/src/content/reference/react/useImperativeHandle.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/src/content/reference/react/useImperativeHandle.md b/beta/src/content/reference/react/useImperativeHandle.md index 7c53e226a..331fde3d0 100644 --- a/beta/src/content/reference/react/useImperativeHandle.md +++ b/beta/src/content/reference/react/useImperativeHandle.md @@ -28,7 +28,7 @@ import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { - // ... Tus métodos ... + // ... tus métodos ... }; }, []); // ... @@ -72,7 +72,7 @@ import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { - // ... Tus métodos ... + // ... tus métodos ... }; }, []); From 02a719ab2f2e21f2f672e781c9dc2a6dff92eb5c Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 5 Jan 2023 21:09:23 -0500 Subject: [PATCH 5/6] change titles to infinitive form --- beta/src/content/reference/react/useImperativeHandle.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/content/reference/react/useImperativeHandle.md b/beta/src/content/reference/react/useImperativeHandle.md index 331fde3d0..22633166f 100644 --- a/beta/src/content/reference/react/useImperativeHandle.md +++ b/beta/src/content/reference/react/useImperativeHandle.md @@ -42,7 +42,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { * `createHandle`: Una función que no toma argumentos y devuelve el identificador ref que quieres exponer. El identificador ref que devuelve puede tener cualquier tipo. Por lo general, devolverá un objeto con lo métodos que quieres exponer. -* `dependencies` **opcional**: La lista de todos los valores reactivos a los que se hace referencia dentro del código de `createHandle`. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es [configurado por React](/learn/editor-setup#linting), va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función `createHandle` se volverá a ejecutar, y el nuevo identificador recien creado será asignado a ref. +* **opcional** `dependencies`: La lista de todos los valores reactivos a los que se hace referencia dentro del código de `createHandle`. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es [configurado por React](/learn/editor-setup#linting), va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función `createHandle` se volverá a ejecutar, y el nuevo identificador recien creado será asignado a ref. #### Devuelve {/*returns*/} @@ -52,7 +52,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { ## Uso {/*usage*/} -### Exponiendo un identificador ref personalizado al componente padre {/*exposing-a-custom-ref-handle-to-the-parent-component*/} +### Exponer un identificador ref personalizado al componente padre {/*exposing-a-custom-ref-handle-to-the-parent-component*/} Los componentes por defecto no exponen sus nodos DOM a los componentes padre. Por ejemplo, si quieres el componente padre de `MyInput` para [tener acceso](/learn/manipulating-the-dom-with-refs) al nodo DOM de ``, tienes que optar por [`forwardRef`:](/reference/react/forwardRef) @@ -166,7 +166,7 @@ input { --- -### Exponiendo tus propios métodos imperativos {/*exposing-your-own-imperative-methods*/} +### Exponer tus propios métodos imperativos {/*exposing-your-own-imperative-methods*/} Los métodos que expones via identificador imperativo no tienen que coincidir exactamente a los métodos del DOM. Por ejemplo, el componente `Post` en el ejemplo de abajo expone a `scrollAndFocusAddComment` por medio de un identificador imperativo. Esto le permite a la `Página` padre desplazar la lista de comentarios *y* enfocar el campo de entrada cuando haces click al botón. From bd6b00ec6f3afa2e3ecdb29ca34b21acd71b5729 Mon Sep 17 00:00:00 2001 From: Rainer Martinez Date: Wed, 22 Mar 2023 22:23:47 -0400 Subject: [PATCH 6/6] Update useImperativeHandle.md --- .../reference/react/useImperativeHandle.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/beta/src/content/reference/react/useImperativeHandle.md b/beta/src/content/reference/react/useImperativeHandle.md index 22633166f..16e9282bd 100644 --- a/beta/src/content/reference/react/useImperativeHandle.md +++ b/beta/src/content/reference/react/useImperativeHandle.md @@ -4,7 +4,7 @@ title: useImperativeHandle -`useImperativeHandle` es un Hook de React que te permite personalizar el identificador expuesto como un [ref.](/learn/manipulating-the-dom-with-refs) +`useImperativeHandle` es un Hook de React que te permite personalizar el identificador expuesto como una [ref.](/learn/manipulating-the-dom-with-refs) ```js useImperativeHandle(ref, createHandle, dependencies?) @@ -38,11 +38,11 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Parámetros {/*parameters*/} -* `ref`: El `ref` que recibes como segundo argumento de la [función render `forwardRef`](/reference/react/forwardRef#render-function) +* `ref`: La `ref` que recibes como segundo argumento de la [función render `forwardRef`](/reference/react/forwardRef#render-function) * `createHandle`: Una función que no toma argumentos y devuelve el identificador ref que quieres exponer. El identificador ref que devuelve puede tener cualquier tipo. Por lo general, devolverá un objeto con lo métodos que quieres exponer. -* **opcional** `dependencies`: La lista de todos los valores reactivos a los que se hace referencia dentro del código de `createHandle`. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es [configurado por React](/learn/editor-setup#linting), va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función `createHandle` se volverá a ejecutar, y el nuevo identificador recien creado será asignado a ref. +* **opcional** `dependencies`: La lista de todos los valores reactivos a los que se hace referencia dentro del código de `createHandle`. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es [configurado por React](/learn/editor-setup#linting), va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función `createHandle` se volverá a ejecutar, y el nuevo identificador recién creado será asignado a ref. #### Devuelve {/*returns*/} @@ -64,7 +64,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Con el código de arriba, [un ref a `MyInput` va a recibir el nodo DOM de ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Aun así, puedes exponer un valor personalizado en su lugar. Para personalizar el identificador expuesto, llama a `useImperativeHandle` en el nivel superior de tu componente: +Con el código de arriba, [una ref a `MyInput` va a recibir el nodo DOM de ``.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) Aun así, puedes exponer un valor personalizado en su lugar. Para personalizar el identificador expuesto, llama a `useImperativeHandle` en el nivel superior de tu componente: ```js {4-8} import { forwardRef, useImperativeHandle } from 'react'; @@ -80,9 +80,9 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Ten en cuenta que en el código de arriba, el `ref` ya no se reenvía a ``. +Ten en cuenta que en el código de arriba, la `ref` ya no se reenvía a ``. -Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de ``, pero quieres exponer dos de sus métodos: `focus` y `scrollIntoView`. Para hacer esto, mantén el DOM real del navegador en un ref separado. Entonces usa `useImperativeHandle` para exponer un identificador solamente con los métodos que quieres que el componente padre llame: +Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de ``, pero quieres exponer dos de sus métodos: `focus` y `scrollIntoView`. Para hacer esto, mantén el DOM real del navegador en una ref separada. Entonces usa `useImperativeHandle` para exponer un identificador solamente con los métodos que quieres que el componente padre llame: ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Ahora, si el componente padre obtiene un ref a `MyInput`, podrá llamar a los métodos `focus` y `scrollIntoView` en él. Sin embargo, no va a tener acceso completo al nodo DOM de `` de manera mas profunda. +Ahora, si el componente padre obtiene una ref a `MyInput`, podrá llamar a los métodos `focus` y `scrollIntoView` en él. Sin embargo, no va a tener acceso completo al nodo DOM de `` de manera más profunda. @@ -168,7 +168,7 @@ input { ### Exponer tus propios métodos imperativos {/*exposing-your-own-imperative-methods*/} -Los métodos que expones via identificador imperativo no tienen que coincidir exactamente a los métodos del DOM. Por ejemplo, el componente `Post` en el ejemplo de abajo expone a `scrollAndFocusAddComment` por medio de un identificador imperativo. Esto le permite a la `Página` padre desplazar la lista de comentarios *y* enfocar el campo de entrada cuando haces click al botón. +Los métodos que expones a través de un identificador imperativo no tienen que coincidir exactamente a los métodos del DOM. Por ejemplo, el componente `Post` en el ejemplo de abajo expone a `scrollAndFocusAddComment` por medio de un identificador imperativo. Esto le permite a la `Página` padre desplazar la lista de comentarios *y* enfocar el campo de entrada cuando haces click al botón. @@ -281,8 +281,8 @@ export default AddComment; -**No sobreutilizar los refs.** Solo debes usar los refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo desplazarse a un nodo, enfocar un nodo, activar una animación, seleccionar texto, etc. +**No sobreutilizar las refs.** Solo debes usar las refs para comportamientos *imperativos* que no puedes expresar como props: por ejemplo desplazarse a un nodo, enfocar un nodo, activar una animación, seleccionar texto, etc. -**Si puedes expresar algo como un prop, no deberias usar un ref.** Por ejemplo, en vez de exponer un identificador imperativo como `{ open, close }` del componente `Modal`, es mejor tomar `isOpen` como un prop, algo como ``. [Efectos](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos via props. +**Si puedes expresar algo como una prop, no deberias usar una ref.** Por ejemplo, en vez de exponer un identificador imperativo como `{ open, close }` del componente `Modal`, es mejor tomar `isOpen` como una prop, algo como ``. [Efectos](/learn/synchronizing-with-effects) puede ayudarte a exponer comportamientos imperativos via props.