{"componentChunkName":"component---src-templates-docs-js","path":"/docs/dom-elements.html","result":{"data":{"markdownRemark":{"html":"
\n
\n

These docs are old and won’t be updated. Go to react.dev for the new React docs.

\n

These new documentation pages teach modern React and include live examples:

\n\n
\n
\n

A React egy böngészőfüggetlen DOM rendszert implementál a teljesítmény és böngészők közti kompatibilitás érdekében. Éltünk a lehetőséggel és lekerekítettünk néhány érdes sarkot a DOM implementációban.

\n

A Reactben minden DOM tulajdonság és attribútum (az eseménykezelőket beleértve) camelCase formában kell, hogy legyen írva. Például a tabindex HTML attribútum a tabIndex-szel egyenértékű Reactben. A kivétel az aria-* és a data-* attribútumok, amik kisbetűsek. Például az aria-label-t megtarthatod aria-label-ként.

\n

Attribútumok közti különbségek

\n

Számos különbség van a React és a HTML attribútumainak működése között:

\n

checked

\n

A checked attribútum a checkbox vagy a radio típusú <input> komponens által támogatott. Használhatod arra, hogy azt jelöld egy komponens ki van-e választva, vagy sem. Ez hasznos kontrollált komponensek építése esetén. A defaultChecked kontrollálatlan megfelelője, ami a komponens létrejöttekor határozza meg, hogy az ki van-e választva, vagy sem.

\n

className

\n

Egy CSS osztály meghatározásához használd a className attribútumot. Ez minden általános DOM és SVG elemre vonatkozik, mint a <div>, <a> és a többi.

\n

Ha a Reactet Web Komponensekkel használod (ami ritka), használd inkább a class attribútumot.

\n

dangerouslySetInnerHTML

\n

A dangerouslySetInnerHTML a React innerHTML helyettesítője a böngésző DOM-ban. Általában HTML-t így bevinni kockázatos, mert akarva-akaratlanul cross-site scripting (XSS) támadásnak teszed ki vele a felhasználóidat. Szóval annak ellenére, hogy bevihetsz HTML-t a Reacttel, ki kell írnod a dangerouslySetInnerHTML attribútumot, ami egy objektumot fogad egy __html tulajdonsággal, ami emlékeztessen arra, hogy ez veszélyes. Például:

\n
function createMarkup() {\n  return {__html: 'Első &middot; Második'};\n}\n\nfunction MyComponent() {\n  return <div dangerouslySetInnerHTML={createMarkup()} />;\n}
\n

htmlFor

\n

Mivel a for egy JavaScriptnek fenntartott kulcsszó, a React elemek helyette a htmlFor-t használják.

\n

onChange

\n

Az onChange esemény úgy viselkedik, ahogy elvárnád: amikor egy űrlap mezője megváltozik, ez az esemény meg lesz hívva. Szándékosan nem használjuk a beépített böngészőviselkedést, mivel az onChange egy helytelen elnevezés a viselkedésére, és a React erre az eseményre támaszkodik valósidejű felhasználói bevitelek kezelésére.

\n

selected

\n

Ha egy <option>-t kiválaszottként szeretnél megjelölni, referálj annak értékére a <select> value propjában. Nézd meg a select címkét további részletekért.

\n

style

\n
\n

Megjegyzés

\n

Néhány példa a dokumentációban a style-t használja a kényelmesség érdekében, de a style attribútum használata elsődleges elemstílusozásra általában nem ajánlott. A legtöbb esetben className használata ajánlott, ami külső CSS stíluslapokban lévő osztályokra hivatkozik. A style a Reactben leggyakrabban rendereléskor dinamikusan kiszámított stílusok hozzáadásához használt. Lásd még GY.I.K: Stílusozás és CSS.

\n
\n

A style attribútum egy camelCase formátumú tulajdonságokkal ellátott JavaScript objektum, CSS sztringek helyett. Ez konzisztens a DOM style JavaScript tulajdonságával, hatékonyabb és megelőzi az XSS biztonsági réseket. Például:

\n
const divStyle = {\n  color: 'blue',\n  backgroundImage: 'url(' + imgUrl + ')',\n};\n\nfunction HelloWorldComponent() {\n  return <div style={divStyle}>Helló világ!</div>;\n}
\n

Megjegyzendő hogy a stílusok nincsenek automatikusan prefixálva. Régebbi böngészők támogatásához szolgáltatnod kell a megfelelő tulajdonságokat:

\n
const divStyle = {\n  WebkitTransition: 'all', // Figyeld meg a nagybetűs 'W'-t\n  msTransition: 'all' // Az 'ms' az egyetlen vendor prefixum\n};\n\nfunction ComponentWithTransition() {\n  return <div style={divStyle}>Ennek működnie kell böngészők között</div>;\n}
\n

A stíluskulcsok camelCase formátumban vannak, hogy konzisztens legyen az elérésük a DOM-on lévő csomópontokkal JS-ből. (pl. node.style.backgroundImage). A vendor prefixumok kivétel az ms nagybetűvel kell, hogy kezdődjenek. A WebkitTransition-nak ezért van nagy “W”-je.

\n

A React automatikusan hozzáilleszti a “px”-et bizonyos numerikus sorközi stílustulajdonságok után. Ha más egységet használnál a “px” helyett, az értéket sztringként add meg a kívánt egységgel. Például:

\n
// Az stílus eredménye: '10px'\n<div style={{ height: 10 }}>\n  Helló világ!\n</div>\n\n// A stílus eredménye: '10%'\n<div style={{ height: '10%' }}>\n  Helló világ!\n</div>
\n

Habár nem minden stílustulajdonság van pixel sztringgé átkonvertálva. Néhányan egység nélkül maradnak (pl. zoom, order, flex). Az egység nélküli tulajdonságok teljes listáját itt találod.

\n

suppressContentEditableWarning

\n

Általában egy figyelmeztetés jelenik meg, amikor egy elem gyermekekkel contentEditable-ként is meg van jelölve, mert ez nem fog működni. Ez az attribútu, elnyomja a figyelmeztetést. Csak akkor használd, ha egy könyvtárat készítesz, mint például a Draft.js, ami manuálisam kezeli a contentEditable-t.

\n

suppressHydrationWarning

\n

Ha szerver oldali React renderelést használsz, általában van egy figyelmeztetés, amikor a szerver és a kliens tartalma eltér. Azonban ritka esetekben nagyon nehéz, vagy lehetetlen a tökéletes egyezést garantálni. Például a időbélyegek várhatóan eltérnek a szerveren és a kliensen.

\n

Ha a suppressHydrationWarning-ot true-ra állítod, a React nem fog figyelmeztetni az attribútumok, vagy az elem tartalmának eltérése esetén. Ez csak egy szint mélységig működik, és egy menekülési útnak van szánva. Ne használd túl sokat. A hidrálásról többet olvashatsz a ReactDOM.hydrateRoot() dokumentációban.

\n

value

\n

A value attribútumot az <input>, <select> és <textarea> komponensek támogatják. Használhatod a komponens értéknek a megadására. Hasznos kontrollált komponensek készítéséhez. A defaultValue a kontrollálatlan változata, amivel a komponens értékét akkor tudod állítani, amikor az először jön létre.

\n

Minden támogatott HTML attribútum

\n

A React 16-tól kezdve minden standard, vagy egyedi DOM attribútum teljesen támogatott.

\n

A React mindig is biztosított egy JavaScript centrikus API-t a DOM-hoz. Mivel a React komponensek gyakran használnak mind egyedi és DOM-mal kapcsolatos propokat, a React konvenció alapján camelCase formátumot használ úgy, ahogyan a DOM API-k:

\n
<div tabIndex={-1} />      // Pont, mint a node.tabIndex DOM API\n<div className=\"Button\" /> // Pont, mint a node.className DOM API\n<input readOnly={true} />  // Pont, mint a node.readOnly DOM API
\n

Ezek a propok nagyon hasonlóan működnek a megegyező HTML attribútumokhoz, a fentebb dokumentált speciális esetek kivételével.

\n

Néhány React által támogatott DOM attribútum:

\n
accept 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 wrap
\n

Hasonlóan, minden SVG attribútum teljes mértékben támogatott:

\n
accentHeight 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 zoomAndPan
\n

Használhatsz egyedi attribútumokat is, amíg azok teljesen kisbetűsek.

","frontmatter":{"title":"DOM Elemek","next":null,"prev":null},"fields":{"path":"content/docs/reference-dom-elements.md","slug":"docs/dom-elements.html"}}},"pageContext":{"slug":"docs/dom-elements.html"}},"staticQueryHashes":[]}