Ir para o conteúdo principal

Guia de Atualização (v3 -> v4)

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Alterações de API que Quebram Compatibilidade​

  • Todas as tags especificadas devem ter valores correspondentes e lançarão erro se ausentes, por exemplo:
new IntlMessageFormat('a<b>strong</b>').format({
  b: (...chunks) => <strong>{chunks}</strong>,
})

  • Não permitimos formatação de tags de autofechamento porque já usamos a sintaxe ICU {placeholder} para isso.

  • Tags XML/HTML são escapadas usando apóstrofe, assim como outras construções ICU.

  • Removemos a dependência do DOMParser e restrições em elementos vazios como <link>. Isso significa que você não precisa mais fazer polyfill do DOMParser no Node.

  • FormattedHTMLMessage e intl.formatHTMLMessage foram removidos pois FormattedMessage agora suporta totalmente tags HTML incorporadas.

Por que estamos fazendo essas alterações?​

  • FormattedHTMLMessage e intl.formatHTMLMessage foram criados quando o React era relativamente novo. Esses componentes ajudaram na migração de HTML bruto para JSX. Dada a popularidade atual do React e o fato de que FormattedMessage permite renderizar tags HTML incorporadas, isso não é mais necessário.

  • Inicialmente na primeira iteração de suporte a HTML incorporado, permitíamos que qualquer tag sem formatador correspondente fosse renderizada como HTML bruto. Recebemos feedbacks internos indicando que permitir tags HTML incorporadas sem sanitização representa um risco de segurança XSS. Portanto, para permitir tags HTML brutas você deve optar explicitamente escapando-as com apóstrofe. Atualizaremos nosso linter para verificar isso também.

Migrando para fora da HTML incorporada em mensagens​

Para restaurar o comportamento antigo de FormattedHTMLMessage e intl.formatHTMLMessage, sugerimos usar o recurso de formato de texto rico conforme abaixo:

Maneira antiga:

intl.formatHTMLMessage('This is a <a href="foo">link</a>')

Nova maneira:

intl.formatMessage('This is a <a>link</a>', {
  a: (...chunks) => sanitizeHTML(`<a href="foo">${chunks.join('')}</a>`),
})

Isso força desenvolvedores a sempre sanitizar o HTML renderizado e fragmentos, minimizando assim o XSS.