diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index ba84982f2..943608a74 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -1,38 +1,38 @@ --- -title: "DOM Attributes in React 16" +title: "Atributos do DOM no React 16" author: [gaearon] --- -In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this: +No passado, o React ignorava atributos do DOM desconhecidos. Se você escreveu arquivos JSX com um atributo que o React não reconhece, ele apenas ignoraria. Por exemplo: ```js -// Your code: -
+// Seu código: +
``` -would render an empty div to the DOM with React 15: +renderizaria uma div vazia no DOM com React 15: ```js -// React 15 output: +// Renderização no React 15:
``` -In React 16, we are making a change. Now, any unknown attributes will end up in the DOM: +No React 16, estamos fazendo uma mudança. Agora, qualquer atributo desconhecido será colocado no DOM: ```js -// React 16 output: -
+// Renderização no React 16: +
``` -## Why Are We Changing This? {#why-are-we-changing-this} +## Por Que Estamos Mudando Isso? {#why-are-we-changing-this} -React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs: +O React sempre forneceu uma API central do JavaScript para o DOM. Visto que os componentes do React constantemente usam props customizadas e relacionadas ao DOM, faz sentido para o React usar a convenção `camelCase` como nas APis do DOM. ```js
``` -This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle: +Isso não mudou. Porém, a maneira como aplicamos isso no passado, nos forçou manter uma lista de permissões de todos os atributos do DOM válidos para o React no bundle. ```js // ... @@ -43,68 +43,68 @@ title: 'title', // ... ``` -This had two downsides: +Isso tem duas desvantagens: -* You could not [pass a custom attribute](https://github.com/facebook/react/issues/140). This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries. +* Você não pode [passar um atributo personalizado](https://github.com/facebook/react/issues/140). Isso é útil por fornecer atributos não padronizados específicos de um navegador, tentando novas APIs do DOM, e interagindo com arbitrárias bibliotecas de terceiros. -* The attribute list kept growing over time, but most React canonical attribute names are already valid in the DOM. Removing most of the whitelist helped us reduce the bundle size a little bit. +* A lista de atributos continuou crescendo ao longo do tempo, porém, a maioria dos atributos canônicos do React já são válidos no DOM. Removendo a maioria das listas de permissões, tornou-se possível reduzir bastante o tamanho do bundle. -With the new approach, both of these problems are solved. With React 16, you can now pass custom attributes to all HTML and SVG elements, and React doesn't have to include the whole attribute whitelist in the production version. +Com uma nova abordagem, ambos problemas foram solucionados. No React 16, você pode passar um atributo personalizado para qualquer elemento HTML e SVG, que o React não irá incluir toda lista de permissões do atributo na versão de produção. -**Note that you should still use the canonical React naming for known attributes:** +**Observe que você ainda deve usar atributos canônicos do React para atributos desconhecidos:** ```js -// Yes, please -
+// Sim, por favor +
-// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`? -
+// Atenção: Propriedade do DOM `tabindex` inválida. Você quis dizer `tabIndex`? +
``` -In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities. +Em outras palavras, a maneira como se usa componentes do DOM no React não mudou, mas agora você tem novos recursos. -## Should I Keep Data in Custom Attributes? {#should-i-keep-data-in-custom-attributes} +## Devo Manter Dados Em Atributos Personalizados? {#should-i-keep-data-in-custom-attributes} -No. We don't encourage you to keep data in DOM attributes. Even if you have to, `data-` attributes are probably a better approach, but in most cases data should be kept in React component state or external stores. +Não. Nós não recomendamos você manter dados em atributos do DOM. Mesmo se você tiver que fazer isso, usar atributos `data-` provavelmente é uma escolha melhor, porém na maioria dos casos deve ser mantido em um estado de um componente React, ou em armazenamentos externos. -However, the new feature is handy if you need to use a non-standard or a new DOM attribute, or if you need to integrate with a third-party library that relies on such attributes. +Entretanto, a nova funcionalidade é de fácil manuseio se você precisa usar um atributo não padronizado, ou um novo atributo do DOM, ou até mesmo se você precisa integrar com bibliotecas terceiras que dependa de tais atributos. -## Data and ARIA Attributes {#data-and-aria-attributes} +## Atributos de Dados e ARIA {#data-and-aria-attributes} -Just like before, React lets you pass `data-` and `aria-` attributes freely: +Assim como antes, o React deixa você passar atributos `data-` e `aria-` livremente: ```js