Guide

Texte riche et interpolation

Quand une chaîne traduite porte du balisage ou une valeur, vous la rendez avec <Trans>. C’est le seul composant de texte riche du SDK, et cette page en est la référence.

Le composant

Importez Trans depuis @sonenta/react-i18next. Les variables viennent de values, les balises de components.

Terms.tsx

import { Trans } from "@sonenta/react-i18next";

<Trans
  i18nKey="cta.terms"
  defaults="Hi {{name}}, please accept the <bold>terms</bold>."
  values={{ name: "Marc" }}
  components={{ bold: <strong /> }}
/>

Ce que cela rend réellement

La sortie ci-dessous n’a pas été déduite du code source : elle a été obtenue en exécutant le snippet sur la version 3.0.0.

output

Hi Marc, please accept the <strong>terms</strong>.

Deux façons de mapper les composants

Passez un objet pour des balises nommées (<bold>…</bold>, comme ci-dessus), ou un tableau pour des emplacements numérotés (<0>…</0> avec components={[<strong />]}). Les deux fonctionnent. Préférez la forme nommée : elle reste lisible, et elle survit à un traducteur qui reformule la phrase. La forme indexée, non.

Toute balise d’une chaîne doit être mappée

Une balise présente dans une valeur traduite mais absente de components ne disparaît pas, et elle n’est pas interprétée. Elle est affichée comme du texte littéral, à l’écran, à votre utilisateur. Mesuré sur la 3.0.0 :

Entrée, sans mapping

'Read this <foreign lang="en">as-is</foreign> please.'

Ce que votre utilisateur voit à l’écran

Read this <foreign lang="en">as-is</foreign> please.

C’est aussi la réponse directe à une lecture erronée fréquente. Sonenta n’insère jamais de balisage dans vos traductions et n’en interprète aucun de son propre chef. Vos chaînes sont stockées et livrées comme du texte. <code><Trans></code> ne rend que les balises que <strong>vous</strong> mappez explicitement via <code>components</code> ; toute autre balise est affichée comme du texte littéral, exactement comme ci-dessus.

Conserver le bon namespace

Passez le t du useTranslation(ns) englobant avec <Trans t={t} …>. Sans lui, la phrase peut se résoudre silencieusement sur le namespace par défaut au lieu du vôtre.

Toutes les props de <Trans>

Treize props, aucune n’est requise. En pratique il vous faut i18nKey, plus defaults tant que la clé n’est pas encore publiée.

Prop	Type
i18nKey	string
ns	string \| string[]
namespace	string (deprecated, alias of ns)
defaults	string
values	Record<string, unknown>
components	readonly ReactNode[] \| Record<string, ReactNode>
count	number
context	string
tOptions	Record<string, unknown>
shouldUnescape	boolean
parent	unknown (wrapper, or null for a fragment)
t	(key: string) => string
children	ReactNode

Ce qui n’existe pas

Pour couper court aux suppositions : il n’existe pas de composant <SonentaText>, et aucun de nos composants ne prend une prop fallback. <Trans> est toute la surface de texte riche. Sonenta n’insère jamais de balisage dans vos traductions et n’en interprète aucun de son propre chef : vos chaînes sont stockées et livrées comme du texte, et <Trans> ne rend que les balises que vous mappez via components.

Vérifié sur @sonenta/react-i18next 3.0.0.

← Retour au quickstart React