# General Translation Knowledge Base: ¿Cómo gestiono los plurales en React? URL: https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx Docs index: https://generaltranslation.com/llms.txt Description: Para gestionar los plurales en React, asigna a cada idioma una oración por cada forma plural y selecciónala con las reglas de plural de ese idioma, ya que el inglés tiene 2 formas, el ruso tiene 4 y el árabe tiene 6. El componente `` de General Translation en gt-react y gt-next recibe tus formas de origen, y General Translation genera las formas que necesita cada idioma de destino. Category: Formato según la configuración regional Last updated: 2026-10-21 Authors: Archie McKenzie Published: 2025-02-17 Para gestionar los plurales en React, asigna a cada idioma una oración por cada forma plural y selecciona la oración que corresponde a cada cantidad con las reglas de plural de ese idioma. El objeto integrado de JavaScript [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) se encarga de la selección: asocia cada número a una categoría de plural del Unicode CLDR (Common Locale Data Repository). El inglés tiene 2 categorías, el ruso y el polaco tienen 4, el árabe tiene 6 y el japonés tiene 1. Una comprobación `count === 1` solo contempla el inglés. El ruso usa tres formas para los números enteros, «1 файл», «2 файла» y «5 файлов» (1 archivo, 2 archivos, 5 archivos), y el 21 toma la misma forma que el 1. Una comprobación que muestra «файл» para 1 y «файлов» para cualquier otra cantidad renderiza «2 файлов» y «21 файлов», y ambas formas son incorrectas. ## Video The video is narrated in English, with English captions. [How do I handle plurals in React?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-how-to-handle-plurals-in-react.mp4) (48 s) General Translation handles plurals in React with the `Plural` component. Run `npx gt init` and sign in, give `Plural` the count and an English sentence for each form, wrap it in a `T` component with the count in `Num`, then run `npx gt translate` to write the forms each language needs. ## ¿Cuáles son las categorías de plural de cada idioma? CLDR define seis categorías de plural: `zero`, `one`, `two`, `few`, `many` y `other`. Cada idioma usa un subconjunto de ellas, y sus reglas asignan cada número a una única categoría de ese subconjunto. | Idioma | Categorías | Qué cantidades corresponden a cada categoría | | -------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | Inglés | `one`, `other` | 1 es `one`; 0, 2, 5 y 1.5 son `other` | | Japonés, chino | `other` | Todas las cantidades son `other` | | Ruso | `one`, `few`, `many`, `other` | 1, 21 y 101 son `one`; de 2 a 4 y 22 son `few`; 0, de 5 a 20 y 100 son `many`; 1.5 es `other` | | Polaco | `one`, `few`, `many`, `other` | 1 es `one`; de 2 a 4 y 22 son `few`; 0, de 5 a 21 y 100 son `many`; 1.5 es `other` | | Árabe | `zero`, `one`, `two`, `few`, `many`, `other` | 0 es `zero`; 1 es `one`; 2 es `two`; de 3 a 10 son `few`; de 11 a 99 son `many`; de 100 a 102 son `other` | Para ver las categorías de un idioma, ejecuta `new Intl.PluralRules('ru').resolvedOptions().pluralCategories` en la consola del navegador. En el caso del ruso, devuelve `one`, `few`, `many` y `other`. ## ¿Cómo gestiono los plurales en una aplicación React multilingüe? General Translation gestiona los plurales en React con el componente [``](/docs/react/reference/components/plural) de `gt-react`, o de `gt-next` en Next.js. Tú escribes las formas que usa tu idioma de origen y General Translation genera las que necesita cada idioma de destino. 1. Pasa el recuento a [``](/docs/react/reference/components/plural) como `n`, con una prop por cada forma del idioma de origen, como `one` y `other` en el caso del inglés. 2. Envuelve el recuento en [``](/docs/react/reference/components/num) y todo el [``](/docs/react/reference/components/plural) en [``](/docs/react/reference/components/t), para que cada forma se traduzca como una oración completa con el número como variable. 3. Ejecuta [`npx gt translate`](/docs/cli/reference/commands/translate) antes de la compilación de producción. General Translation traduce cada forma y añade las categorías que usa cada idioma de destino: el árabe recibe seis formas y el ruso, cuatro. ```tsx import { T, Plural, Num } from 'gt-react'; export function InboxCount({ count }: { count: number }) { return ( You have {count} message.} other={<>You have {count} messages.} /> ); } ``` Al renderizar, el componente [``](/docs/react/reference/components/plural) de General Translation elige la forma correspondiente a `count` según las [reglas de plural de CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) de la configuración regional activa. Si esa categoría no existe, usa `plural`, después `other` y, por último, sus hijos. [``](/docs/react/reference/components/num) da formato al número localmente con `Intl.NumberFormat`, de modo que 1000000 se renderiza como 1,000,000 en inglés, 1.000.000 en alemán y 10,00,000 en hindi, y el valor nunca se envía a la API de General Translation. Para que los mensajes con plurales sigan traducidos a medida que cambia el texto, ejecuta [`npx gt translate`](/docs/cli/reference/commands/translate) en CI o [configura Locadex](/docs/platform/locadex/guides/configuring-automations), el agente de IA de General Translation, para que traduzca el nuevo contenido de origen cada vez que cambie un pull request o se haga push de un commit. Los revisores pueden corregir cualquier forma generada en el [Editor de Traducciones](/docs/platform/dashboard/guides/reviewing-translations) del panel de control de General Translation. En [Gestión de plurales y ramas](/docs/react/guides/handling-plurals-and-branches) encontrarás los pasos para React, Next.js y los paquetes experimentales `gt-tanstack-start` y `gt-react-native`. ## ¿Cómo pluralizo una cadena en una app de React que solo está en inglés? Una app que solo se publica en inglés necesita dos formas, `one` y `other`, así que basta con una pequeña función auxiliar. Pasa frases completas para que los sustantivos irregulares ("person" y "people") y los verbos ("is" y "are") cambien según la cantidad. ```ts title="pluralize.ts" const englishPlurals = new Intl.PluralRules('en-US'); export function pluralize(count: number, one: string, other: string): string { return englishPlurals.select(count) === 'one' ? one : other; } ``` ```tsx import { pluralize } from './pluralize'; export function CartSummary({ items, viewers }: { items: number; viewers: number }) { return ( <> {/* 1 artículo, 5 artículos */}

{pluralize(items, `${items} item`, `${items} items`)}

{/* 1 persona está viendo esto, 3 personas están viendo esto */}

{pluralize(viewers, '1 person is watching', `${viewers} people are watching`)}

); } ``` Las reglas del inglés asignan el 0 a `other`, por lo que la función auxiliar renderiza "0 items". La función auxiliar tiene las reglas del inglés codificadas de forma fija y acepta dos frases, mientras que el ruso necesita tres, así que sustitúyela por [``](/docs/react/reference/components/plural) u otra biblioteca de internacionalización (i18n) cuando la aplicación incorpore un segundo idioma. ## ¿Cómo pluralizo una cadena fuera de JSX? Para el texto que debe ser una cadena simple, como un `placeholder` o un `aria-label`, el hook [`useGT`](/docs/react/reference/hooks/use-gt) de General Translation devuelve una función que acepta un mensaje de plural ICU (International Components for Unicode). Dentro del mensaje, `#` muestra el valor del recuento. ```tsx import { useGT } from 'gt-react'; export function ProductSearch({ count }: { count: number }) { const gt = useGT(); return ( ); } ``` En los componentes asíncronos de App Router, usa en su lugar [`getGT`](/docs/react/nextjs/reference/functions/get-gt) de `gt-next/server`. En [Traducción de cadenas](/docs/react/guides/translating-strings) se explica el resto de la API de cadenas. ## ¿Cómo gestionan los plurales react-i18next y react-intl? Ambas bibliotecas determinan la categoría con las reglas de plural de CLDR y leen las frases de cada idioma desde un archivo de catálogo, así que tu equipo o tus traductores tienen que escribir todas las formas de cada mensaje en todos los idiomas. Ninguna de las dos genera las traducciones. [react-i18next](https://react.i18next.com/) almacena una clave por categoría, con la categoría como sufijo, y selecciona la clave según la opción `count`. ```json title="locales/en/translation.json" { "messages_one": "You have {{count}} message.", "messages_other": "You have {{count}} messages." } ``` ```tsx import { useTranslation } from 'react-i18next'; export function InboxCount({ count }: { count: number }) { const { t } = useTranslation(); return

{t('messages', { count })}

; } ``` Un archivo en árabe necesita seis claves, desde `messages_zero` hasta `messages_other`. La [documentación de plurales de i18next](https://www.i18next.com/translation-function/plurals) enumera todos los sufijos. [react-intl](https://formatjs.github.io/docs/react-intl/), la biblioteca de React de FormatJS, escribe todas las categorías en una sola cadena con formato de mensajes ICU, donde `#` es el número con el formato propio de la configuración regional. ```tsx import { FormattedMessage } from 'react-intl'; export function InboxCount({ count }: { count: number }) { return ( ); } ``` Un catálogo en árabe repite el mensaje con las ramas `zero`, `one`, `two`, `few`, `many` y `other`. La [guía de sintaxis ICU de FormatJS](https://formatjs.github.io/docs/core-concepts/icu-syntax/) explica las ramas de plural y las coincidencias exactas, como `=0`. ## ¿Qué enfoque deberías usar para los plurales en React? | Enfoque | Dónde se definen las formas | Quién escribe las formas de cada idioma de destino | | ---------------------------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- | | Una función auxiliar con `Intl.PluralRules` | En tu código, solo en inglés | Nadie, ya que la aplicación se publica en un solo idioma | | react-i18next | Claves con sufijos en un archivo JSON por idioma | Tu equipo o los traductores | | react-intl | Mensajes ICU en un catálogo por idioma | Tu equipo o los traductores | | [``](/docs/react/reference/components/plural) de General Translation | Las formas en tu idioma de origen, en JSX | General Translation, al ejecutar [`npx gt translate`](/docs/cli/reference/commands/translate) | Usa una función auxiliar si la aplicación se publica solo en inglés. Usa únicamente react-i18next o react-intl si tu equipo ya mantiene archivos de catálogo y los traductores escriben cada forma a mano. Usa [``](/docs/react/reference/components/plural) de General Translation si la aplicación se publica en varios idiomas y sus textos cambian en cada lanzamiento, ya que General Translation escribe las formas de cada idioma de destino para cada nuevo mensaje en plural. ## Preguntas frecuentes ### ¿Cómo muestro "No items" cuando el recuento es 0? Las reglas del inglés asignan el 0 a la categoría `other`, así que un mensaje que solo tenga `one` y `other` mostrará "0 items". Si usas una cadena, añade una coincidencia exacta para el cero en el mensaje ICU que le pasas a [`useGT`](/docs/react/reference/hooks/use-gt): ```tsx gt('{count, plural, =0 {No items} one {# item} other {# items}}', { count }); ``` En JSX, comprueba si `count === 0` y renderiza el estado vacío en su propio bloque [``](/docs/react/reference/components/t). ### ¿Funciona el componente Plural en Next.js? Sí. Importa [``](/docs/react/reference/components/plural), [``](/docs/react/reference/components/t) y [``](/docs/react/reference/components/num) desde `gt-next`; admiten las mismas props que en `gt-react`. General Translation también los incluye en los paquetes experimentales `gt-tanstack-start` y `gt-react-native`. ### ¿Con qué cantidades debo probar los plurales? Renderiza cada mensaje con plurales con los valores 0, 1, 2, 5, 11, 21 y 100 en cada configuración regional de destino. Con esas cantidades se cubren todas las categorías de números enteros en inglés, ruso, polaco y árabe. Añade 1.5 para cubrir `other` en ruso y polaco. ## Related questions - [¿Cómo traduzco texto condicional en JSX?](https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx): Mantén la oración completa y traduce cada una de sus versiones, porque un ternario la divide en fragmentos que pierden su significado y su lugar en el orden de palabras de cada idioma. General Translation lo resuelve con `` dentro de ``, que traduce la oración como una sola unidad. - [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx): Sí. Las bibliotecas gt-react y gt-next de General Translation permiten hacer i18n en React y Next.js sin claves de traducción y sin tener que mantener un archivo JSON por idioma. El texto permanece inline en JSX dentro del componente ``, y el comando gt translate genera las traducciones de cada idioma durante la compilación, con contexto extraído de tu código. Locadex puede mantenerlas al día mediante pull requests. - [¿Cuál es la mejor biblioteca de i18n para una aplicación React?](https://generaltranslation.com/es/kb/best-react-i18n-library.mdx): Las cuatro principales bibliotecas de i18n para React son gt-react de General Translation, react-i18next, Lingui y React Intl. Las cuatro renderizan traducciones y les dan formato, pero solo gt-react también las genera a partir de textos escritos inline en tu JSX. Elige react-i18next si quieres conservar los catálogos y plugins de i18next, Lingui si buscas extracción a catálogos compilados y React Intl si prefieres FormatJS y el formato de mensajes ICU. ## Previous and next questions - Next question: [¿Cómo traduzco texto condicional en JSX?](https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.