{"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

Performans üçün və brauzerlər arası uyğunluqlar üçün React brauzerdən müstəqil DOM sistemi tətbiq edir. Biz bu fürsətdən istifadə edərək brauzer DOM-unun tətbiqində olan bəzi problemləri düzəltdik.

\n

React-də bütün DOM parametrləri və atributları (hadisə işləyiciləri daxil olmaqla) camelCase formatında olmalıdır. Məsələn tabindex HTML atributu React-də tabIndex atributuna uyğun gəlir. İstisnalar aria-* və data-* atributlarıdır: bu atributlar kiçik hərf ilə yazılmalıdır. Məsələn, siz aria-label atributunu aria-label kimi saxlaya bilərsiniz.

\n

Atributlar arasında Fərqlər

\n

Bir neçə atributun işləməsi React və HTML-də fərqlidir:

\n

checked

\n

checked atributu checkbox və ya radio tipli <input> komponentlərində dəstəklənir. Siz bu atribut ilə komponentin seçildiyini təyin edə bilərsiniz. Bu kontrol edilən komponent düzəltmək üçün faydalıdır. defaultChecked kontrol edilməyən ekvivalentidir. Bu, komponentin ilk mount-da seçildiyini təyin etmək üçün istifadə olunur.

\n

className

\n

CSS sinfini təyin etmək üçün className atributundan istifadə edin. Bu, bütün normal DOM və SVG elementlərinə (<div>, <a> və başqaları) aiddir.

\n

Əgər siz React-i Veb Komponentlər ilə işlədirsinizsə (nadir haldır) class atributu işlədin.

\n

dangerouslySetInnerHTML

\n

React-də dangerouslySetInnerHTML brauzerin DOM-unda innerHTML atributunu əvəzləyir. Adətən, təsadüfən istifadəçiləri kros-səhifə scriptləri (XSS) hücumlarına ifşa etməyini asanlaşdırdığından koddan HTML təyin etmək risklidir. Bu səbəbdən HTML-i birbaşa React-ə təyin etmək üçün siz dangerouslySetInnerHTML yazıb __html açarı olan obyekt göndərməlisiniz ki, bunun təhlükəli olduğunu yada salasınız. Məsələn:

\n
function createMarkup() {\n  return {__html: 'Birinci &middot; İkinci'};\n}\n\nfunction MyComponent() {\n  return <div dangerouslySetInnerHTML={createMarkup()} />;\n}
\n

htmlFor

\n

for-un Javascript-də qorunan söz olduğundan, React elementləri htmlFor işlədirlər.

\n

onChange

\n

onChange hadisəsi gözlədiyiniz kimi davranır: anket sahəsi dəyişdikdə bu hadisə atılır. Brauzerdə olan mövcud davranışın səhv olduğundan və React-in istifadəçi daxil etməsinin atdığı hadisədən real zamanda asılı olduğundan biz bilərəkdən brauzerdə olan mövcud davranışı işlətmirik.

\n

selected

\n

<option> elementinin seçilməsini istəyirsinizsə, bu elementin dəyərini elementin valideyni olan <select> elementinin value atributuna istinad edin.\nDaha ətraflı təlimatlar üçün “select Təqi” səhifəsini oxuyun.

\n

style

\n
\n

Qeyd

\n

Sənədlərdə bəzi misalların style-ı rahatlıq üçün işlətdiyinə baxmayaraq, style atributunu elementləri stilləşdirmək üçün əsas həll kimi işlətməyi tövsiyə etmirik. Bir çox halda kənar CSS stil cədvəlində (stylesheet) olan siniflərə referans etmək üçün className işlətməyi tövsiyə edirik. style ən çox React applikasiyalarında render zamanı dinamik hesablanmış stilləri əlavə etmək üçün işlənilir. FAQ: Stilləşdirmək və CSS sənədinə baxın.

\n
\n

style atributu CSS mətn əvəzinə camelCased parametrləri olan Javascript obyekti qəbul edir. Bu Javascriptin DOM style parametri ilə uyğundur, daha səmərəlidir və istifadəçini XSS-dən qoruyur. Məsələn:

\n
const divStyle = {\n  color: 'blue',\n  backgroundImage: 'url(' + imgUrl + ')',\n};\n\nfunction HelloWorldComponent() {\n  return <div style={divStyle}>Salam Dünya!</div>;\n}
\n

Nəzərə alın ki, stillər avtomatik prefikslənmirlər. Keçmiş brauzerləri dəstəkləmək üçün müvafiq stil parametrlərini təyin edin:

\n
const divStyle = {\n  WebkitTransition: 'all', // 'W'-nin böyük hərf olduğuna fikir verin\n  msTransition: 'all' // 'ms' yeganə kiçik hərfli vendor prefiksidir\n};\n\nfunction ComponentWithTransition() {\n  return <div style={divStyle}>Bu bütün brauzerlərdə işləyəcək</div>;\n}
\n

JS-də DOM nodlarının parametrlərini oxumaq ilə uyğun olması üçün (məsələn node.style.backgroundImage) stil açarları camelCased olmalıdır. ms-dən başqa bütün vendor prefikslər ilk hərfi böyük hərflə başlamalıdırlar. Bu səbəbdən WebkitTransition-da böyük hərfli “W” var.

\n

React avtomatik olaraq “px” şəkilçisini bəzi ədədi eyni sətrli stil parametrlərinə əlavə edəcək. Əgər sizə “px”-dən fərqli vahidlər lazımdırsa dəyəri lazım olan vahid ilə mətn formasında göstərin. Məsələn:

\n
// Stilin nəticəsi: '10px'\n<div style={{ height: 10 }}>\n  Salam Dünya!\n</div>\n\n// Stilin nəticəsi: '10%'\n<div style={{ height: '10%' }}>\n  Salam Dünya!\n</div>
\n

Bütün stil parametrləri piksel mətnlərinə çevrilmirlər. Bəziləri vahidsiz qalırlar (məsələn zoom, order, flex). Vahidsiz parametrlərin siyahısını bu linkdən görə bilərsiniz.

\n

suppressContentEditableWarning

\n

Normalda bu xəbərdarlıq, uşağı olan elementin contentEditable atributu olduğu halda göstərilir. Çünki bu işləməyəcək. Bu atribut bu xəbərdarlığı gizlədir. Draft.js kimi contentEditable-ı əl ilə idarə edən kitabxana düzəltmirsinizsə bu atributdan istifadə etməyin.

\n

suppressHydrationWarning

\n

Server React render etdikdə normalda server və klient fərqli kontent render edirsə xəbərdarlıq atılır. Amma bəzi nadir hallarda klient və server kontentinin uyğun olduğunu qarantiyalamaq çətindir. Məsələn tarixlərin server və klientdə fərqli olması gözlənilir.

\n

Əgər suppressHydrationWarning true-dursa React, elementlər arasında və atributlar arasında fərqliliklər haqqında xəbərdarlıq etməyəcək. Bu, yalnız bir dərəcə dərinlikdə işləyir və yalnız çıxış yolu kimi işlətmək üçün nəzərdə tutulub. Bunu çox işlətməyin. Hidrasiya haqqında əlavə məlumat üçün ReactDOM.hydrateRoot() sənədinə baxın.

\n

value

\n

value atributu <input>, <select> və <textarea> komponentləri tərəfindən dəstəklənir. Bu atributdan istifadə edərək komponentin dəyərini təyin edə bilərsiniz. Bu kontrol edilən komponentlər yaratmaq üçün faydalıdır. Bunun kontrol edilməyən ekvivalenti komponentin ilk dəfə mount olunduğu zaman təyin edilən defaultValue atributudur.

\n

Dəstəklənən bütün HTML Atributları

\n

React 16-dan başlayaraq, bütün standart və ya xüsusi DOM atributları tam dəstəklənir.

\n

React həmişə DOM üçün Javascript əsaslı API təmin edib. React komponentlərin həm xüsusi, həm də DOM-a aid propları qəbul etdiyindən React, DOM API-ları kimi camelCase konvensiyasından istifadə edir:

\n
<div tabIndex={-1} />      // node.tabIndex DOM API-ı kimi\n<div className=\"Button\" /> // node.className DOM API-ı kimi\n<input readOnly={true} />  // node.readOnly DOM API-ı kimi
\n

Yuxarıda göstərilmiş xüsusi hallar istisna olmaqla bu proplar uyğun olan HTML atributlarına bənzər formada işləyirlər.

\n

React-in dəstəklədiyi bəzi DOM atributları:

\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

Eyni formada, bütün SVG atributları da tam dəstəklənir:

\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

Kiçik hərf istifadə etdiyiniz müddətdə siz xüsusi atributlar da işlədə bilərsiniz.

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