DOM Elements در React

ری‌اکت یک سیستم DOM مستقل از مرورگر جهت عملکرد مناسب و سازگاری متقابل مرورگر، پیاده سازی کرده است. ما این فرصت را داریم که چند عیب کوچک را در پیاده سازی مرورگر DOM برطرف کنیم.

در React تمام مشخصات DOM و attribute ها (شامل کنترل کننده‌های رویداد) باید به صورت camelCased نوشته شوند. برای مثال، tabindex در HTML متناظر با tabIndex در ری‌اکت است. استثناهای این مورد attribute های aria-* و data-* می‌باشند که باید با حروف کوچک نوشته شوند. برای مثال می‌توانید بنویسید aria-label.

تفاوت‌ها در attribute ها

چند attribute وجود دارد که به شکل متفاوتی در React و HTML کار می‌کنند:

Checked

checked attribute توسط کامپوننت‌های <input> مربوط به checkbox تایپ یا radio پشتیبانی می‌شوند. می‌توانید از آن استفاده کنید تا کنترل کنید که آیا کامپوننت چک شد است یا خیر. این attribute برای ساخت کامپوننت‌های کنترل شده مناسب است. defaultChecked معادل کنترل نشده است که کنترل می‌کند که آیا کامپوننت هنگام اولین نصب چک شد است یا خیر.

className

جهت مشخص کردن یک CSS class از className attribute استفاده کنید. این attribute به تمام المان‌های DOM و SVG مانند <div> و <a> اعمال می‌گردد.

اگر از ری‌اکت به همراه کامپوننت‌های وب استفاده می‌کنید (که البته چندان رایج نیست)، به جای این attribute از class استفاده کنید.

dangerouslySetInnerHTML

dangerouslySetInnerHTML یک جایگزین در ری‌اکت برای استفاده از innerHTML در DOM مرورگر است. به طور کلی تنظیم HTML از کد خطرناک است. شما می‌توانید HTML را به طور مستقیم از ری‌اکت تنظیم کنید، اما باید dangerouslySetInnerHTML را تایپ کرده و یک آبجکت را با کلید __html منتقل کنید تا به خودتان خطرش را یادآوری کنید. برای مثال:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

htmlFor

از آن جایی که for یک کلمۀ رزرو شده در جاوا اسریپت است، المان‌های ری‌اکت به جای آن از htmlFor استفاده می‌کنند.

onChange

رویداد onChange آن گونه که شما انتظار دارید رفتار می‌کند: وقتی یک فیلد فرم تغییر کند، این رویداد شروع به کار خواهد کرد. ما عمدا از رفتار مرورگر موجود استفاده نمی‌کنیم چون onChange برای رفتار آن باعث اشتباه می‌شود و React جهت کنترل همزمان ورودی کاربر بر این رویداد تکیه می‌کند.

Selected

selected attribute توسط کامپوننت‌های <option> پشتیبانی می‌شود. شما می‌توانید از آن جهت مشاهدۀ این که آیا کامپوننت انتخاب شده است یا خیر استفاده کنید. این attribute برای ساخت کامپوننت‌های کنترل شده مناسب است.

Style

نکته: در برخی مثال‌های موجود در مستندات از style به علت همگرایی استفاده شده است، اما استفاده از این attribute به عنوان وسیلۀ اصلی ایجاد استایل المان‌ها به طور کلی توصیه نمی‌شود. در اکثر موارد، از className جهت ارجاع class های تعریف شده در CSS stylesheet خارجیباید استفاده شود. در اغلب موارد، در برنامه‌های React از style برای اضافه کردن استایل‌های دینامیکی هنگام رندر استفاده می‌شود. همچنین می‌توانید بخش FAQ: Styling and CSS را نیز ببینید.

style attribute یک آبجکت جاوا اسکریپت با مشخصات نوشته شده به صورت camelCased را می‌پذیرد، به جای یک رشتۀ CSS. این حالت مطابق مشخصۀ style جاوا اسکریپت DOM است، اما موثرتر و با جلوگیری از حفره‌های امنیتی XSS. برای مثال:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

دقت کنید که استایل‌ها autoprefixed نمی‌باشند. جهت پشتیبانی از مرورگرهای قدیمی، نیاز دارید مشخصات style متناظر را فراهم کنید:

const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}

کلیدهای Style به صورت camelCased نوشته می‌شوند تا با دسترسی به مشخصات روی DOM node های JS تطابق داشته باشند (مانند node.style.backgroundImage). پیشوندهای Vendor بجز ms باید با حرف بزرگ شروع شوند. به همین دلیل است که WebkitTransition با W بزرگ شروع می‌شود.

ری اکت به طور خودکار یک پسوند px به properties استایل عددی خاصی اضاف می‌کند. اگر می‌خواهید از واحدهایی غیر از px استفاده کنید، آن مقدار را به عنوان یک رشته به همراه واحد مورد نظرتان مشخص کنید. برای مثال:

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

البته تمام properties استایل به رشته‌های پیکسل تبدیل نشده‌اند. آنهایی که معین هستند بدون واحد می‌باشند (مانند zoom و order). لیست کامل مشخصات بدون واحد را می‌توانید اینجا ببینید.

suppressContentEditableWarning

به طور معمول هنگامی که یک المان با children به عنوان contentEditable مشخص شده است با یک هشدار همراه خواهد بود چون کار نخواهد کرد. این attribute آن هشدار را سرکوب می‌کند. از آن مگر اینکه در حال ساخت یک کتابخانه مانند Draft.js هستید که به طور دستی contentEditable را کنترل می‌کند، استفاده نکنید.

suppressHydrationWarning

اگر شما از رندر طرف سرور React استفاده می‌کنید، به طور معمول هنگامی که طرف سرور و طرف مشتری محتوای متفاوتی را رندر می‌کنند، یک هشدار وجود خواهد داشت. هرچند در برخی موارد نادر، تضمین یک تطابق دقیق خیلی سخت و یا حتی غیرممکن است. برای مثال در مورد timestamp ها انتظار می‌رود طرف سرور از طرف مشتری متفاوت باشد.

اگر شما suppressHydrationWarning را روی true تنظیم کنید، React در مورد آن عدم تطابق و محتوای آن المان، هشداری نخواهد داد. از آن زیاد استفاده نکنید. می‌توانید در مورد hydration در بخش مربوط به مستندات ReactDOM.hydrate() بیشتر بدانید.

Value

value attribute توسط کامپوننت‌های < input > و <textarea>  پشتیبانی می‌شود. می‌توانید از آن جهت تنظیم مقدار یک کامپوننت استفاده کنید. این attribute برای ساخت کامپوننت‌های کنترل شده مناسب است. defaultValue معادل کنترل نشدۀ آن می‌باشد که مقدار کامپوننت را هنگام نصب آن تنظیم می‌کند.

تمام Attribute های پشتیبانی شدۀ HTML

در ری اکت ۱۶ هر DOM attribute استاندارد یا دلخواهی به طور کامل پشتیبانی می‌شود.

ری‌اکت همیشه یک API با محور جاوا اسکریپت برای DOM فراهم کرده است. از آن جایی که کامپوننت‌های React اغلب هردوی prop های custom و وابسته به DOM را می‌پذیرند، ری‌اکت از قرارداد camelCase استفاده می‌کند، درست مانند API های DOM:

<div tabIndex="-1" />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

این prop ها مشابه attribute های HTML متناظر کار می‌کنند البته با استثناهایی که در موارد بالا ذکر شده است.

برخی attribute های DOM که توسط ری‌اکت پشتیبانی می‌شوند اینجا آورده شده است:

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap

به طور مشابه، تمام attribute های SVG به طور کامل پشتیبانی شده‌اند:

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

همچنین تا زمانی که تمام attribute های دلخواه شما کاملا با حروف کوچک نوشته شده باشند، می‌توانید از آنها استفاده کنید.

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5٫00 out of 5)
Loading...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

counter customizable free hit