O React implementa um sistema DOM independente ao navegador visando performance e compatibilidade entre navegadores. Aproveitamos a oportunidade para melhorar algumas implementações do DOM no navegador.
\nNo React, todas as propriedades e atributos (incluindo manipuladores de eventos) devem estar em camelCase. Por exemplo, o atributo HTML tabindex corresponde ao atributo tabIndex no React. As exceções são os atributos aria-* e data-*, os quais devem estar em lowercase. Por exemplo, você pode manter aria-label como aria-label.
Existem alguns atributos que funcionam de formas diferentes no React e no HTML:
\nO atributo checked é suportado por componentes <input> do tipo (type) checkbox ou radio. Você pode usá-lo para definir se o componente está checado. Isso é útil para construção de componentes controlados (controlled components). defaultChecked é o equivalente para componentes não controlados (uncontrolled components), que define se o componente está checado na primeira vez em que é montado.
Para especificar uma classe CSS, utilize o atributo className. Isso se aplica para todos os DOM e elementos SVG regulares como <div>, <a>, e outros.
Se você usar React com Web Components (que é uma prática incomum), use o atributo class.
dangerouslySetInnerHTML é o substituto do React para o uso do innerHTML no DOM do navegador. Em geral, adicionar HTML através de código é arriscado pois é fácil expor inadvertidamente seus usuários a um ataque de cross-site scripting (XSS). Então, você pode definir HTML diretamente através do React, mas vocẽ tem que digitar dangerouslySetInnerHTML e passar um objeto com a chave __html, para lhe relembrar que é perigoso. Por exemplo: —>
function createMarkup() {\n return {__html: 'First · Second'};\n}\n\nfunction MyComponent() {\n return <div dangerouslySetInnerHTML={createMarkup()} />;\n}Já que for é uma palavra reservada em JavaScript, em vez disso elementos React usam htmlFor.
O evento onChange se comporta como você esperaria que ele se comportasse: sempre que um campo do formulário muda, este evento é disparado. Nós intencionalmente não utilizamos o comportamento existente do navegador porque onChange é um termo inadequado para seu comportamento e o React depende deste evento para manipular input do usuário em tempo real.
Se você quiser marcar uma <option> como selecionada, faça referência ao valor dessa opção no value de sua <select>.\nConfira “A tag de seleção” para obter instruções detalhadas.
\n\nNota
\nAlguns exemplos na documentação utilizam
\nstylepor conveniência, mas usar o atributostylecomo a forma principal de estilizar elementos geralmente não é recomendado. Na maioria dos casos,classNamedeve ser usado para referenciar classes definidas em um arquivo de estilo CSS externo.styleé geralmente usado em aplicações React para adicionar estilos computados dinamicamente em tempo de renderização. Veja também FAQ: Estilização e CSS.
O atributo style aceita um objeto JavaScript com propriedades em camelCase ao invés de uma string CSS. Isso é consistente com a propriedade do JavaScript style
const divStyle = {\n color: 'blue',\n backgroundImage: 'url(' + imgUrl + ')',\n};\n\nfunction HelloWorldComponent() {\n return <div style={divStyle}>Hello World!</div>;\n}Perceba que estes estilos não são auto prefixados. Para serem compatíveis com navegadores antigos você precisa fornecer as propriedades de estilos correspondentes:
\nconst divStyle = {\n WebkitTransition: 'all', // perceba o 'W' maiúsculo aqui\n msTransition: 'all' // 'ms' é o único prefixo de fornecedor minúsculo\n};\n\nfunction ComponentWithTransition() {\n return <div style={divStyle}>Isto deve funcionar em diferentes navegadores</div>;\n}Chaves de style são em camelCase com o intuito de serem consistentes com o acesso de propriedades que são nós do DOM através do JS (ex. node.style.backgroundImage). Prefixos de fornecedor (vendor prefixes) diferentes de ms devem começar com a letra maiúscula. É por isso que WebkitTransition tem um “W” maiúsculo.
React vai acrescentar automaticamente um sufixo “px” para determinadas propriedades numéricas de inline style. Se você quiser usar unidades diferentes de “px”, especifique o valor como uma string com a unidade desejada. Por exemplo:
\n// Style resultante: '10px'\n<div style={{ height: 10 }}>\n Hello World!\n</div>\n\n// Style resultante: '10%'\n<div style={{ height: '10%' }}>\n Hello World!\n</div>Nem todas as propriedades de estilos são convertidas para strings pixel. Algumas permanecem sem unidade (exemplo: zoom, order, flex). Uma lista completa com as propriedades sem unidade pode ser vista aqui
Normalmente, existe um alerta quando um elemento contém outros elementos que também estão marcados como contentEditable. Assim sendo, não funcionará. Esse atributo interrompe esse alerta. Não faça uso dele. A não ser que você esteja construindo uma biblioteca como a Draft.js que gerencia contentEditable manualmente.
Se você usa a renderização do React no lado do servidor, normalmente existe um alerta para quando o servidor e o lado do cliente renderizam conteúdo de formas diferentes. Entretanto, em alguns casos raros, é muito difícil ou impossível de garantir a correspondência exata. Por exemplo, é esperado que timestamps estejam diferentes no servidor e no cliente.
\nSe você definir suppressHydrationWarning para true, o React não lhe avisará sobre incompatibilidades nos atributos e no conteúdo daquele elemento. Isto só funciona dentro de 1 nível de profundidade e destina-se a ser usado como uma saída de emergência. Não use excessivamente. Você pode ler mais sobre hydration na documentação do ReactDOM.hydrate().
O atributo value é suportado pelos componentes <input>, <select> e <textarea>. Você pode usá-lo para definir o valor do componente. Isso é útil para construção de componentes controlados (controlled components). defaultValue é o equivalente para componentes não controlados (uncontrolled components), que define o valor do componente quando este é montado pela primeira vez.
A partir do React 16, qualquer atributo padrão ou personalizado é totalmente suportado.
\nO React sempre forneceu uma API centrada no JavaScript para o DOM. Uma vez que os componentes React geralmente recebem tanto props personalizadas quanto props relacionadas ao DOM, o React usa a convenção camelCase assim como as APIs do DOM:
<div tabIndex={-1} /> // Assim como node.tabIndex DOM API\n<div className=\"Button\" /> // Assim como node.className DOM API\n<input readOnly={true} /> // Assim como node.readOnly DOM APIEssas props funcionam de forma similar aos atributos HTML correspondentes, com exceção dos casos especiais documentados abaixo.
\nAlguns dos elementos DOM suportados pelo React incluem:
\naccept acceptCharset accessKey action allowFullScreen alt async autoComplete\nautoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked\ncite classID className colSpan cols content contentEditable contextMenu controls\ncontrolsList coords crossOrigin data dateTime default defer dir disabled\ndownload draggable encType form formAction formEncType formMethod formNoValidate\nformTarget frameBorder headers height hidden high href hrefLang htmlFor\nhttpEquiv icon id inputMode integrity is keyParams keyType kind label lang list\nloop low manifest marginHeight marginWidth max maxLength media mediaGroup method\nmin minLength multiple muted name noValidate nonce open optimum pattern\nplaceholder poster preload profile radioGroup readOnly rel required reversed\nrole rowSpan rows sandbox scope scoped scrolling seamless selected shape size\nsizes span spellCheck src srcDoc srcLang srcSet start step style summary\ntabIndex target title type useMap value width wmode wrapIgualmente, todos os atributos SVG são totalmente suportados:
\naccentHeight accumulate additive alignmentBaseline allowReorder alphabetic\namplitude arabicForm ascent attributeName attributeType autoReverse azimuth\nbaseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight\nclip clipPath clipPathUnits clipRule colorInterpolation\ncolorInterpolationFilters colorProfile colorRendering contentScriptType\ncontentStyleType cursor cx cy d decelerate descent diffuseConstant direction\ndisplay divisor dominantBaseline dur dx dy edgeMode elevation enableBackground\nend exponent externalResourcesRequired fill fillOpacity fillRule filter\nfilterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize\nfontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy\ng1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef\ngradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic\nimageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength\nkerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor\nlimitingConeAngle local markerEnd markerHeight markerMid markerStart\nmarkerUnits markerWidth mask maskContentUnits maskUnits mathematical mode\nnumOctaves offset opacity operator order orient orientation origin overflow\noverlinePosition overlineThickness paintOrder panose1 pathLength\npatternContentUnits patternTransform patternUnits pointerEvents points\npointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits\nr radius refX refY renderingIntent repeatCount repeatDur requiredExtensions\nrequiredFeatures restart result rotate rx ry scale seed shapeRendering slope\nspacing specularConstant specularExponent speed spreadMethod startOffset\nstdDeviation stemh stemv stitchTiles stopColor stopOpacity\nstrikethroughPosition strikethroughThickness string stroke strokeDasharray\nstrokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity\nstrokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor\ntextDecoration textLength textRendering to transform u1 u2 underlinePosition\nunderlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic\nvHanging vIdeographic vMathematical values vectorEffect version vertAdvY\nvertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing\nwritingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole\nxlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase\nxmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPanVocê também pode usar atributos personalizados, desde que todos eles estejam em letras minúsculas.
","frontmatter":{"title":"Elementos DOM","next":null,"prev":null},"fields":{"path":"content/docs/reference-dom-elements.md","slug":"docs/dom-elements.html"}}},"pageContext":{"slug":"docs/dom-elements.html"}},"staticQueryHashes":[]}