المنت‌های DOM

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

در ری‌اکت، تمامی ویژگی‌ها و صفات DOM (از جلمه event handler ها) باید به صورت camelCase باشند. برای مثال، صفت tabindex در HTML با صفت tabIndex در ری‌اکت مطابقت دارد. استثناهایی که وجود دارند یکی صفات aria-* و دیگری صفات data-* هستند که باید با حروف کوچک نوشته بشوند. برای مثال aria-label همان aria-label باقی می‌ماند.

تفاوت بین صفات

صفاتی وجود دارند که عملکردشان در ری‌اکت با HTML متفاوت است:

checked

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

className

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

اگر از ری‌اکت برای Web Components (که البته رایج نیست) استفاده می‌کنید، صفت class را مورد استفاده قرار دهید.

dangerouslySetInnerHTML

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

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

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

htmlFor

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

onChange

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

selected

اگر می خواهید یک <option> را در حالت انتخاب‌شده قرار دهید، مقدار value آن را به مقدار value تگ `