{t('key')}
; // more details below ``` ### Componente de classe ```js import { withTranslation } from 'react-i18next'; // withTranslation adds the "t" function to props: const { t } = this.props; // call the "t" function with a key from the JSON file:{t('p1')}
// in the JSON file: { "p1": "My paragraph" } // output:My paragraph
``` ### Com dados dinâmicos ```js // in the component: const username = 'moT';{t('welcome', { username: username })}
// in the JSON file: { "welcome": "Welcome {{username}}" } // output:Welcome moT
``` O exemplo acima passa um objeto para a função `t` com uma variável `username`. A variável será usada no valor JSON onde `{{username}}` está. ## Traduza com o componente `Trans` A regra geral é usar a função "t" quando puder. Mas existe o componente `Trans` para quando isso não for o suficiente, geralmente quando você tem elementos embutidos no texto. Você pode usar o componente `Trans` com qualquer tipo de componente React. ### Elementos básicos aninhados ```js // in the component: import { Trans } from 'react-i18next'
Welcome to freeCodeCamp
``` Você pode colocar a chave dentro das tags do componente como no exemplo acima se o texto contém tags "simples" sem atributos. `br`, `strong`, `i` e `p` são padrões, mas essa lista pode ser expandida na configuração do i18n. ### Elementos complexos aninhados Em outras situações, você vai querer ter um texto específico dentro de outro elemento, uma tag "a" é um bom exemplo: ```js // in the component: // in the JSON file: { "check-forum": "Check out <0>our forum." } // output:Check out our forum
``` No exemplo acima, a chave é definida nos atributos do componente `Trans`. O `<0>` e `` no JSON representam o primeiro filho do componente, neste caso, o elemento âncora. Se há mais filhos, eles apenas vão se somar ali usando a mesma sintaxe. Você pode encontrar os filhos de um componente na ferramenta de desenvolvedor React fazendo uma inspeção. `placeholder` está ali pois o linter estava reclamando sobre um elemento `` vazio. ### Com uma variável ```js // in the component: const email = 'team@freecodecamp.org'; // in the JSON file: { "fcc": { "email": "Send us an email at: <0>{{email}}" } } // output:Send us an email at: team@freecodecamp.org
``` No exemplo acima, a chave e a variável estão configuradas nos atributos do componente `Trans`. `{{ email }}` precisa estar em algum lugar no componente `Trans` também, não importa aonde. ## Mudando texto Para mudar o texto no lado do cliente, vá para o arquivo `.json`, ache a chave usada no componente React, e mude o valor para o novo texto que você deseja. Você deve pesquisar na base do código por aquela chave para ter certeza de que não está sendo usada em outro lugar. Ou, se está, se as mudanças fazem sentido em todos os lugares. ## Adicionando texto Se o texto que você deseja adicionar ao cliente existe no arquivo `.json`, use a chave existente. Caso contrário, crie uma nova chave. O arquivo em inglês é a "fonte da verdade" para todos os arquivos `.json` que compartilham o mesmo nome. Se você precisa adicionar uma nova chave, a adicione lá. Então, adicione a chave em **todos** os arquivos `translations.json`. > [!NOTE] Use texto em inglês para todos os idiomas se o arquivo está sendo traduzido via Crowdin. Os testes vão falhar se você não fizer isso. Seria bom manter as chaves na mesma ordem entre todos os arquivos também. Além disso, tente colocar toda a pontuação, espaçamento, citações e tudo mais nos arquivos JSON, não nos componentes ou arquivos de servidor. > [!NOTE] O underscore (`_`) é um caractere reservado para chaves dos arquivos que ficam do lado do cliente. Veja [a documentação](https://www.i18next.com/translation-function/plurals) para saber como são usados. ## Documentação útil - [documentação react-i18next](https://react.i18next.com/latest/usetranslation-hook) - [documentação i18next](https://www.i18next.com/translation-function/essentials)