Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate useId #575

Merged
merged 3 commits into from
Nov 20, 2022
Merged

Translate useId #575

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
102f1ef
Translation from English to Spanish
Isaias077 Oct 14, 2022
41d2ad5
Merge branch 'main' into main
Isaias077 Oct 29, 2022
1763979
Apply suggestions from code review
carburo Nov 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 34 additions & 33 deletions beta/src/content/apis/react/useId.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ title: useId

<Intro>

`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.
`useId` es un Hook de React para generar IDs únicos que se pueden pasar a los atributos de accesibilidad.


```js
const id = useId()
Expand All @@ -16,17 +17,17 @@ const id = useId()

---

## Usage {/*usage*/}
## Uso {/*usage*/}

<Pitfall>

**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
**No utilices `useId` para generar keys en una lista.** [Las keys deben generarse a partir de tus datos.](/learn/rendering-lists#where-to-get-your-key)

</Pitfall>

### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/}
### Generación de ID únicos para atributos de accesibilidad {/*generating-unique-ids-for-accessibility-attributes*/}

Call `useId` at the top level of your component to generate a unique ID:
Llama a `useId` en el nivel superior de tu componente para generar un ID único:

```js [[1, 4, "passwordHintId"]]
import { useId } from 'react';
Expand All @@ -36,7 +37,7 @@ function PasswordField() {
// ...
```

You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different attributes:
A continuación, puedes pasar el <CodeStep step={1}>ID generado</CodeStep> a los diferentes atributos:

```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]]
<>
Expand All @@ -45,11 +46,11 @@ You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different at
</>
```

**Let's walk through an example to see when this is useful.**
**Veamos un ejemplo para ver cuándo es útil.**

[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that a certain element (like an input) is described by another element (like a paragraph).
[Atributos de accesibilidad HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) como [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) te permiten especificar que dos etiquetas están relacionadas entre sí. Por ejemplo, puedes especificar que un determinado elemento (como una entrada de texto) sea descrito por otro elemento (como un párrafo).

In regular HTML, you would write it like this:
En HTML normal, lo escribirías así:

```html {5,8}
<label>
Expand All @@ -64,7 +65,7 @@ In regular HTML, you would write it like this:
</p>
```

However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, you can generate a unique ID with `useId`:
Sin embargo, escribir IDs fijos como este no es una buena práctica en React. Un componente puede renderizarse más de una vez en la página, ¡pero los IDs tienen que ser únicos! En lugar de utilizar un ID fijo, puedes generar un ID único con `useId`:

```js {4,11,14}
import { useId } from 'react';
Expand All @@ -88,7 +89,7 @@ function PasswordField() {
}
```

Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash.
Ahora, incluso si `PasswordField` aparece varias veces en la pantalla, no habrá conflicto entre los IDs generados.

<Sandpack>

Expand Down Expand Up @@ -131,31 +132,31 @@ input { margin: 5px; }

</Sandpack>

[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
[Mira este video](https://www.youtube.com/watch?v=0dNzNcuEuOo) para ver la diferencia en la experiencia de usuario con tecnologías de asistencia.

<Pitfall>

**`useId` requires an identical component tree on the server and the client** when you use [server rendering](/apis/react-dom/server). If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
**`useId` requiere un árbol de componentes idéntico en el servidor y el cliente** cuando utilizas [renderizado en el servidor](/apis/react-dom/server). Si los árboles que se renderizan en el servidor y el cliente no coinciden exactamente, los IDs generados no coincidirán.

</Pitfall>

<DeepDive title="Why is useId better than an incrementing counter?">
<DeepDive title="¿Por qué useId es mejor que un contador incremental?">

You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.
Puede que te preguntes por qué `useId` es mejor que incrementar una variable global como `nextId++`.

The primary benefit of `useId` is that React ensures that it works with [server rendering.](/apis/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/apis/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
El principal beneficio de `useId` es que React se asegura de que funcione con el [renderizado en el servidor.](/apis/react-dom/server) Durante el renderizado en el servidos, tus componentes generan salida HTML. Más tarde, en el cliente, [la hidratación](/apis/react-dom/client/hydrateRoot) adjunta tus controladores de eventos al HTML generado. Para que la hidratación funcione, la salida del cliente debe coincidir con el HTML del servidor.

This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
Esto es muy difícil de garantizar con un contador incremental porque el orden en que se hidratan los componentes del cliente puede no coincidir con el orden en que se emitió el HTML del servidor. Al llamar a `useId`, te aseguras de que la hidratación funcionará y la salida coincidirá entre el servidor y el cliente.

Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
Dentro de React, `useId` se genera a partir de la "ruta del padre" del componente llamado. Esta es la razón por la que, si el cliente y el árbol del servidor son iguales, la "ruta del padre" coincidirá independientemente del orden del renderizado.

</DeepDive>

---

### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
### Generar IDs para varios elementos relacionados {/*generating-ids-for-several-related-elements*/}

If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them:
Si necesitas proporcionar IDs a varios elementos relacionados, puedes llamar a `useId` para generar un prefijo compartido para ellos:

<Sandpack>

Expand All @@ -182,13 +183,13 @@ input { margin: 5px; }

</Sandpack>

This lets you avoid calling `useId` for every single element that needs a unique ID.
Esto te permite evitar llamar a `useId` para cada elemento que necesite un ID único.

---

### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
### Especificación de un prefijo compartido para todos los IDs generados {/*specifying-a-shared-prefix-for-all-generated-ids*/}

If you render multiple independent React applications on a single page, you may pass `identifierPrefix` as an option to your [`createRoot`](/apis/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/apis/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified.
Si renderizas varias aplicaciones de React independientes en una sola página, puedes pasar `identifierPrefix` como una opción para las llamadas [`createRoot`](/apis/react-dom/client/createRoot#parameters) o [`hydrateRoot`](/apis/react-dom/client/hydrateRoot). Esto garantiza que los IDs generados por las dos aplicaciones diferentes nunca entren en conflicto porque cada identificador generado con `useId` comenzará con el prefijo distinto que hayas especificado.

<Sandpack>

Expand Down Expand Up @@ -271,11 +272,11 @@ input { margin: 5px; }

---

## Reference {/*reference*/}
## Referencia {/*reference*/}

### `useId()` {/*useid*/}

Call `useId` at the top level of your component to generate a unique ID:
Llama a `useId` en el nivel superior de tu componente para generar un ID único:

```js
import { useId } from 'react';
Expand All @@ -285,18 +286,18 @@ function PasswordField() {
// ...
```

[See more examples above.](#usage)
[Ve más ejemplos arriba.](#usage)

#### Parameters {/*parameters*/}
#### Parámetros {/*parameters*/}

`useId` does not take any parameters.
`useId` no toma ningún parámetro.

#### Returns {/*returns*/}
#### Retorna {/*returns*/}

`useId` returns a unique ID string associated with this particular `useId` call in this particular component.
`useId` devuelve una cadena de ID única asociada con esta llamada `useId` llamado en un componente particular.

#### Caveats {/*caveats*/}
#### Advertencias {/*caveats*/}

* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
* `useId` es un Hook, así que solo puedes llamarlo **en el nivel superior de tu componente** o en tus propios hooks. No puedes llamarlo dentro de bucles o condiciones. Si necesitas hacerlo, extrae un nuevo componente y mueve allí el estado.

* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
* `useId` **no debe usarse para generar keys** en una lista. [Las keys deben generarse a partir de tus datos.](/learn/rendering-lists#where-to-get-your-key)