به دلیل کارایی و سازگاری با مرورگرهای مختلف، ری‌اکت سیستم DOM خود را، مستقل از مرورگر پیاده‌سازی می‌کند. ما از این فرصت استفاده کردیم تا مقداری به زمختی های پیاده‌سازی DOM در مرورگر نظم دهیم.
\nدر ری‌اکت، تمامی ویژگی‌ها و صفات DOM (از جلمه event handler ها) باید به صورت camelCase باشند. برای مثال، صفت tabindex در HTML با صفت tabIndex در ری‌اکت مطابقت دارد. استثناهایی که وجود دارند یکی صفات aria-* و دیگری صفات data-* هستند که باید با حروف کوچک نوشته بشوند. برای مثال aria-label همان aria-label باقی می‌ماند.
صفاتی وجود دارند که عملکردشان در ری‌اکت با HTML متفاوت است:
\nصفت checked در کامپوننت های <input> که از تیپ checkbox یا radio هستند قابل استفاده است. شما میتوانید از آن بدین شکل که وضعیت کامپوننت چک خورده باشد یا نه استفاده کنید. این برای ساختن کامپوننت‌های کنترل شده مناسب است. معادل کنترل نشده آن defaultChecked هست که فقط وضعیت چک خوردن همان اول کامپوننت را هنگام mount شدن بر عهده دارد.
برای اختصاص دادن یک کلاس CSS، از صفت className استفاده کنید. این در مورد همه المنت های معمول DOM و SVG مانند <div>، <a> و سایرین صدق می‌کند.
اگر از ری‌اکت برای Web Components (که البته رایج نیست) استفاده می‌کنید، صفت class را مورد استفاده قرار دهید.
\ndangerouslySetInnerHTML جایگزین ری‌اکت برای innerHTML جهت استفاده در DOM مرورگر است. به طور کلی، قرار دادن HTML از داخل کد، کار پر خطریست، برای اینکه به‌راحتی کاربران را در معرض حمله تزریق اسکریپت از طریق وبگاه (XSS) قرار می‌دهد. البته که میتوانید مستقیما HTML را از طریق ری‌اکت وارد کنید، اما باید بنویسید dangerouslySetInnerHTML و یک شئ با کلید __html در آن قرار بدهید تا به خودتان یادآوری کنید که کار خطرناکی کرده‌اید. برای مثال:
function createMarkup() {\n return {__html: 'First · Second'};\n}\n\nfunction MyComponent() {\n return <div dangerouslySetInnerHTML={createMarkup()} />;\n}از اونجایی که for کلمه رزرو شده ای در جاوااسکریپت هست، المنت های ری‌اکت از htmlFor استفاده میکنند.
رویداد onChange رفتاری که از او انتظار می‌رود را دارد: هر وقت که یک فیلد از فرم تغییر کند، این رویداد اجرا می‌شود. ما عمدا از رفتار آن، آن طور که در مرورگر تعریف شده تبعیت نمی کنیم، چون onChange نامی اشتباه برای رفتارش دارد و ری‌اکت برای مدیریت زنده ی اطلاعات وارد شده توسط کاربر به آن اتکا دارد.
اگر می خواهید یک <option> را در حالت انتخاب‌شده قرار دهید، مقدار value آن را به مقدار value تگ `
\n\nتوجه
\nبعضی مثال‌های این مستندات از
\nstyleبرای راحتی کار استفاده می‌کند، اما **استفاده کردن از صفت style به عنوان راهکار اصلی برای style دادن به المنت‌ها، عموما پیشنهاد نمی‌شود. ** در غالب موارد،classNameباید برای ارجاع دادن به کلاس‌های تعریف شده در یک CSS stylesheet خارجی استفاده شود.styleمعمولا در اپلیکیشن های ری‌اکت وقتی استفاده می‌شود که نیاز به اضافه کردن style های پویا در زمان render باشد. مراجعه کنید به سوالات متداول: style دادن و CSS. صفتstyle، یک شئ جاوااسکریپت با ویژگی‌های camelCased قبول می‌کند، نه اینکه یک رشته CSS قبول کند. این با ویژگیstyleجاوااسکریپت در DOM سازگاری دارد، بهینه‌تر است و از حفره‌های امنیتی XSS جلوگیری می‌کند. برای مثال:
const divStyle = {\n color: 'blue',\n backgroundImage: 'url(' + imgUrl + ')',\n};\n\nfunction HelloWorldComponent() {\n return <div style={divStyle}>Hello World!</div>;\n}به یاد داشته باشید که style ها به صورت اتوماتیک prefix ندارند. برای اینکه بتوانید مرورگرهای قدیمی را هم پشتیبانی کنید، باید ویژگی‌های مربوطه style را خودتان اضافه کنید:
\nconst divStyle = {\n WebkitTransition: 'all', // note the capital 'W' here\n msTransition: 'all' // 'ms' is the only lowercase vendor prefix\n};\n\nfunction ComponentWithTransition() {\n return <div style={divStyle}>This should work cross-browser</div>;\n}کلیدهای style به صورت camelCase هستند تا با روشی که node به ویژگی‌های DOM از طریق جاوااسکریپت دسترسی پیدا می‌کند، سازگاری داشته‌باشد (مثال: node.style.backgroundImage). همه Vendor Prefix ها به جز ms باید با حرف بزرگ شروع بشوند. برای همین است که WebkitTransition در ابتدا یک “W” بزرگ دارد.
ری‌اکت به طور اتوماتیک یک پسوند “px” به برخی ویژگی‌های عددی style درخط (inline) اضافه می‌کند. اگر می‌خواهید واحدی غیر از “px” استفاده کنید، مقدار آن را به صورت یک رشته همراه با واحد مورد نظر وارد کنید. برای مثال:
\n// Result style: '10px'\n<div style={{ height: 10 }}>\n Hello World!\n</div>\n\n// Result style: '10%'\n<div style={{ height: '10%' }}>\n Hello World!\n</div>البته همه ویژگی‌های style به رشته و پیکسل تبدیل نمی‌شوند. برخی از آنها بدون واحد باقی می‌مانند (مثلا zoom، order و flex). لیست کامل این ویژگی‌های بدون واحد در اینجا قابل مشاهده است.
معمولا، هر وقت که یک المنت والد به عنوان contentEditable علامت گذاری می‌شود، هشداری داده می شود چون کار نخواهد کرد. این صفت باعث می‌شود تا آن هشدار مسکوت باقی بماند. از این استفاده نکنید، مگر اینکه یک کتابخانه ای دارید می‌سازید مثل Draft.js که خودش به صورت دستی contentEditable را مدیریت می‌کند.
اگر از rendering سمت سروری ری‌اکت استفاده می‌کنید، در صورتی که محتوای render شده کلاینت با محتوای render شده سرور متفاوت باشد، هشداری دریافت می‌کنید. البته، در برخی موارد خیلی سخت است که دقیقا با همدیگر جور بشوند. برای مثال timestamp ها بین سرور و کلاینت متفاوت خواهند بود.
\nاگر شما suppressHydrationWarning را برای المنتی true کنید، ری‌اکت برای مغایرت‌های صفات و محتوای آن المنت به شما هشدار نخواهد داد. فقط تا یک سطح از عمق کار خواهد کرد، و این هم به منظور یک راه فرار است، زیاد از آن استفاده نکنید. شما میتوانید در مورد hydration در اسناد ReactDOM.hydrate() بیشتر بخوانید.
صفت value توسط کامپوننت های <input>، <select> و <textarea> پشتیبانی می‌شود. شما میتوانید از آن برای تعیین مقدار یک کامپوننت استفاده کنید. این برای ساختن کامپوننت های کنترل‌شده مناسب است. defaultValue معادل غیر کنترلی آن است، که مقدار کامپوننت را در هنگام mount شدن تعیین می‌کند.
بعد از ری‌اکت ۱۶، هر صفت استاندارد یا سفارشیDOM کاملا پشتیبانی می‌شود.
\nAPIای که ری‌اکت برای DOM ارائه کرده، همیشه با محوریت JavaScript بوده‌است. از آن‌جایی که کامپوننت‌های ری‌اکت معمولا هم propهای مربوط به DOM و همpropهای سفارشی را دریافت می‌کند، ری‌اکت از قانون camelCase استفاده می‌کند. درست مشابه APIهایی که DOM ارائه می‌کند:
\n<div tabIndex={-1} /> // Just like node.tabIndex DOM API\n<div className=\"Button\" /> // Just like node.className DOM API\n<input readOnly={true} /> // Just like node.readOnly DOM APIاین prop ها شبیه صفات HTML همگون خود کار میکنند، به استثناء موارد خاص که در بالا ذکر شده اند.
\nبرخی از صفات DOM که توسط ری‌اکت پشتیبانی می‌شوند عبارتند از:
\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 wrapبه همین ترتیب، تمام صفات SVG کاملا پشتیبانی می‌شوند:
\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 zoomAndPanشما میتوانید صفات سفارشی را استفاده کنید تا وقتی که کاملا با حروف کوچک باشند.
","frontmatter":{"title":"المنت‌های 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":[]}