Saltar al contenido principal

intlMessageShape

La plataforma Jutro tiene el tipo personalizado intlMessageShape.

Esencialmente, se define como:

intlMessageShape = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.shape(intlMessageObject)
  ]
)

Es decir, acepta valores del tipo string o del tipo intlMessageObject.

intlMessageObject se define como:

{
  id?: string;
  defaultMessage?: string;
  args?: Record<string, string>
}

Muchos de nuestros componentes integrados permiten establecer propiedades que se renderizan como texto de la interfaz de usuario. Por ejemplo, el texto que podría aparecer en un componente Button.

Todas estas propiedades son del tipo intlMessageShape. Como tal, puede asignar valores utilizando strings sin formato u objetos intlMessageObject.

Nota: Esto también se aplica a las propiedades to y href en varios componentes, como Link. Es decir, los propios enlaces son traducibles. Esta funcionalidad es necesaria cuando se vinculan recursos específicos del idioma.

Sin embargo, si usa strings sin formato para establecer estas propiedades, esas cadenas de interfaz de usuario no serán traducibles. Para que un string de interfaz de usuario sea traducible, debe ser del tipo intlMessageObject.

Recomendamos enfáticamente que se utilice el tipo intlMessageObject. Aunque es posible que no tenga la intención de traducir su aplicación ahora, el uso del tipo intlMessageObject la preparará para el futuro.

Del mismo modo, si crea sus propios componentes personalizados, cuando corresponda, asegúrese de usar el tipo intlMessageShape. Esto permitirá a los consumidores de su componente crear strings de interfaz de usuario que sean traducibles.

Ejemplo de JS/JSX​

Para definir strings de interfaz de usuario para su uso en un componente JSX:

  1. Cree un archivo MyComponent.messages.js, como:

    import { defineMessages } from '@jutro/locale';
    export default defineMessages({
      loggedInAs: {
        id: 'jutro-app.pages.AuthPage.LoggedInAs',
        defaultMessage: 'Logged in as: {name}',
        description: 'Message to display the currently logged in user'
        },
        notLoggedIn: {
          id: 'jutro-app.pages.AuthPage.NotLoggedIn.',
          defaultMessage: 'Not logged in.',
          description: 'Message to tell the user they are not logged in'
        }
    })

  2. En su componente JSX, importe y use estos mensajes

Identificadores​

ID duplicados​

El valor de la propiedad id se puede duplicar dentro del mismo archivo. Sin embargo, el valor defaultMessage asociado a la declaración final de id es lo que se extraerá.

Asegúrese de que los valores id sean únicos en todos los archivos. Si alguno de ellos se repite, obtendrá un error de tiempo de compilación.

Lectura adicional​

Consulte la documentación Internacionalización y localización para obtener una explicación detallada sobre cómo se extraen estos strings y cómo se traducen posteriormente.

On this page