Translate Referencing values with Refs #559
Conversation
Size Changes📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖 This PR introduced no changes to the javascript bundle 🙌 |
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*. | ||
| Cuando quieres que un componente "recuerdo" alguna información, pero no quieres que esa información [active nuevos renderizados](/learn/render-and-commit), puedes usar una *ref*. |
There was a problem hiding this comment.
En vez de "recuerdo", podría ser un "recuerde", debido a que es el componente el que recordará la información usando la referencia.
Y el trigger, podría ser reemplazado por un "provoque" o un "desencadene" para mantener la consistencia con traducciones anteriores en esta beta, aunque es opcional, ya que en la documentación anterior hubo traducciones de to trigger a render como "activar".
|
|
||
| ```js | ||
| import { useRef } from 'react'; | ||
| ``` | ||
|
|
||
| Inside your component, call the `useRef` Hook and pass the initial value that you want to reference as the only argument. For example, here is a ref to the value `0`: | ||
| Dentro de tu componente, llama al Hook `useRef` y pasa el valor inicial al que quieres hacer referencia como único parámetro. Por ejemplo, este es una ref con el valor `0`: |
There was a problem hiding this comment.
Podrías usar "argumento" en vez de "parámetro", aunque obviamente se entiende según el contexto, así se le da el gusto a los puristas al hacer la diferencia :)
|
|
||
| You can access the current value of that ref through the `ref.current` property. This value is intentionally mutable, meaning you can both read and write to it. It's like a secret pocket of your component that React doesn't track. (This is what makes it an "escape hatch" from React's one-way data flow--more on that below!) | ||
| Puedes acceder al valor actual de esa ref a través de la propiedad `ref.current`. Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él. Es como un bolsillo secreto de tu componente que React no puede rastrear. (Esto es lo que lo hace una "escotilla de escape" del flujo de datos de una vía de React—más sobre eso a continuación!) |
There was a problem hiding this comment.
"Este valor es mutable intencionalmente, lo que significa que puedes tanto leer como escribir en él."
Ese escribir se refiere a la mutabilidad de la propiedad, usar un "escribir" como traducción literal podría llegar a hacer perder la naturalidad, entonces podríamos parafrasearlo a un "puedes tanto leerlo como modificarlo" o parafrasearlo a algo parecido evitando el uso del pronombre de objeto directo dos veces (leerlo, modificarlo).
| </button> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| </Sandpack> | ||
|
|
||
| The ref points to a number, but, like [state](/learn/state-a-components-memory), you could point to anything: a string, an object, or even a function. Unlike state, ref is a plain JavaScript object with the `current` property that you can read and modify. | ||
| La ref apunta hacia un número, pero, como [el estado](/learn/state-a-components-memory), podrías apuntar a cualquier cosa: un string, un objeto, o incluso una función. A diferencia del estado, la ref es un objeto plano de JavaScript con la propiedad `current` que puedes leer y modificar. |
There was a problem hiding this comment.
Podríamos usar un "la ref hace referencia a un número, pero al igual que el estado, podrías hacer referencia a cualquier cosa: una string, un objeto, o incluso una función. (...)" Para mantener el significado luego de la traducción, ya que ese "points" es el verbo del sujeto "ref", por lo que en ese contexto el "apuntar" podría traducirse con mayor naturalidad a un "hace referencia".
|
|
||
| You can combine refs and state in a single component. For example, let's make a stopwatch that the user can start or stop by pressing a button. In order to display how much time has passed since the user pressed "Start", you will need to keep track of when the Start button was pressed and what the current time is. **This information is used for rendering, so you'll keep it in state:** | ||
| Puedes combinar las refs y el estado en un solo componente. Por ejemplo, hagamos un cronómetro que el usuario pueda iniciar y detener al presionar un botón. Para poder mostrar cuánto tiempo ha pasado desde que el usuario pulsó "Iniciar", necesitarás mantener rastreado cuándo el botón de Iniciar fue presionado y cuál es el tiempo actual. **Esta información es usada para la renderización, asi que la guardala en el estado:** |
There was a problem hiding this comment.
asi que la guardala en el estado --> así que guárdala en el estado
| - Don't read or write `ref.current` during rendering. This makes your component hard to predict. | ||
| - Las refs son una escotilla de escape para quedarse con valores que no son usados para la renderización. No los necesitarás a menudo. | ||
| - Una ref es un objeto plano de JavaScript con una sola propiedad llamada `current`, la cual puedes leer o asignarle un valor. | ||
| - Puedes pedirle a React que te de una ref llamando al Hook `useRef`. |
There was a problem hiding this comment.
que te de una ref --> que te dé una ref
|
|
||
| If you tried to implement this with a ref, React would never re-render the component, so you'd never see the count change! See how clicking this button **does not update its text**: | ||
| Si trataste de implementar esto con una ref, React nunca re-renderizaría el componente, así que nunca verías la cuenta cambiar! Observa como al hacer clic en este botón **no se actualiza su texto**: |
There was a problem hiding this comment.
Hay que tener ojo con las aperturas de exclamaciones
(...) React nunca re-renderizaría el componente, ¡así que nunca verías la cuenta cambiar! (...)
|
Perdón, justo estuve haciendo la revisión e hicieron el merge, espero sirva de algo igualmente. Saludos! :) |
|
@Vicenciomf1 Muchas gracias por la revisión, lamentablemente mezclé el PR con algunas ediciones mías antes de verla. Como hay muchos PRs abiertos y tengo el tiempo limitado he intentado que el proceso sea lo más expedito posible haciendo ediciones menores directamente en la mayoría de los casos. No es el proceso ideal, pero de momento es el único sostenible para mí al ser el único mantainer activo. En este caso revisaré los comentarios que dejaste para ver cuáles aún aplican y haré la edición de ser necesario. Adicionalmente, siempre se puede hacer un PR con propuesta de ediciones a los artículos que ya están traducidos. ¡Saludos! |
|
¡Sí! No hay problema, muchas gracias a ti; mis disculpas por las molestias. Por si acaso, ¿habría alguna posibilidad de postular para ser mantainer? Me interesa mucho el tema, me haría el tiempo e intentaría dar lo mejor de mí para aportar a la comunidad :) |
|
@Vicenciomf1 Sí, es posible postularse. Revisa antes las responsabilidades de los maintainers para que tengas una idea del trabajo que se hace. Probablemente mañana publique un pequeño documento con los pasos del proceso y te etiqueto. |
#500
No sabía como traducir correctamente "snapshot" en este contexto, así que me guié de la #549 para traducirlo.