diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 2488ba489..2f7f20abc 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: المنت های DOM +title: المنت‌های DOM layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,29 +14,27 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -ری‌اکت دارای سیستم DOM مستقل از مرورگر برای کارایی و سازگاری با مرورگر هاست. - از این فرصت استفاده کردیم تا مقداری زمختی های پیاده سازی DOM مرورگر را مرتب و منظم کنیم. +به دلیل کارایی و سازگاری با مرورگرهای مختلف، ری‌اکت سیستم DOM خود را، مستقل از مرورگر پیاده‌سازی می‌کند. ما از این فرصت استفاده کردیم تا مقداری به زمختی های پیاده‌سازی DOM در مرورگر نظم دهیم. -در ری‌اکت، تمامی ویژگی ها و صفات DOM (از جلمه event handlers) باید به صورت camelCased باشند. برای مثال، صفت HTML `tabindex` با صفت `tabIndex` در ری‌اکت مطابقت دارد. استثناهایی که وجود دارند یکی صفات `aria-*` و دیگری صفات `data-*` هستند که باید -با حروف کوچک نوشته بشوند. برای مثال `aria-label` همان `aria-label` باقی می‌ماند. +در ری‌اکت، تمامی ویژگی‌ها و صفات DOM (از جلمه event handler ها) باید به صورت camelCase باشند. برای مثال، صفت `tabindex` در HTML با صفت `tabIndex` در ری‌اکت مطابقت دارد. استثناهایی که وجود دارند یکی صفات `aria-*` و دیگری صفات `data-*` هستند که باید با حروف کوچک نوشته بشوند. برای مثال `aria-label` همان `aria-label` باقی می‌ماند. ## تفاوت بین صفات {#differences-in-attributes} -صفاتی وجود دارند که عملکردشون در ری‌اکت با HTML متفاوت است: +صفاتی وجود دارند که عملکردشان در ری‌اکت با HTML متفاوت است: ### checked {#checked} -صفت `checked` در کامپوننت های `` که از تیپ `checkbox` یا `radio` هستند قابل استفاده است. شما میتوانید از آن بدین شکل که وضعیت کامپوننت چک خورده باشد یا نه استفاده کنید. این برای ساختن کامپوننت های قابل کنترل مناسب است. معادل غیر کنترلی آن `defaultChecked` هست که فقط وضعیت چک خوردن همان اول کامپوننت را هنگام سوار شدن بر عهده دارد. +صفت `checked` در کامپوننت های `` که از تیپ `checkbox` یا `radio` هستند قابل استفاده است. شما میتوانید از آن بدین شکل که وضعیت کامپوننت چک خورده باشد یا نه استفاده کنید. این برای ساختن کامپوننت‌های کنترل شده مناسب است. معادل کنترل نشده آن `defaultChecked` هست که فقط وضعیت چک خوردن همان اول کامپوننت را هنگام mount شدن بر عهده دارد. ### className {#classname} برای اختصاص دادن یک کلاس CSS، از صفت `className` استفاده کنید. این در مورد همه المنت های معمول DOM و SVG مانند `
`، `` و سایرین صدق می‌کند. -اگر با ری‌اکت از وب کامپوننتس (که البته رایج نیست) استفاده می‌کنید، صفت `class` را مورد استفاده قرار دهید. +اگر از ری‌اکت برای Web Components (که البته رایج نیست) استفاده می‌کنید، صفت class را مورد استفاده قرار دهید. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`dangerouslySetInnerHTML` جایگزین ری‌اکت برای `innerHTML` جهت استفاده در DOM مرورگر است. به طور کلی، قرار دادن HTML از داخل کد، کار پر خطریست، برای اینکه به راحتی کاربران را در معرض حمله [تزریق اسکریپت از طریق وبگاه](https://fa.wikipedia.org/wiki/%D8%AA%D8%B2%D8%B1%DB%8C%D9%82_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%A7%D8%B2_%D8%B7%D8%B1%DB%8C%D9%82_%D9%88%D8%A8%DA%AF%D8%A7%D9%87) قرار می‌دهد. البته که میتوانید مستقیما HTML را از طریق ری‌اکت وارد کنید، اما باید بنویسید `dangerouslySetInnerHTML` و یک شئ با کلید `__html` در آن قرار بدهید تا به خودتان یادآوری کنید که کار خطرناکی کرده اید. +`dangerouslySetInnerHTML` جایگزین ری‌اکت برای `innerHTML` جهت استفاده در DOM مرورگر است. به طور کلی، قرار دادن HTML از داخل کد، کار پر خطریست، برای این‌که به‌راحتی کاربران را در معرض حمله [تزریق اسکریپت از طریق وبگاه (XSS)](https://fa.wikipedia.org/wiki/%D8%AA%D8%B2%D8%B1%DB%8C%D9%82_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%A7%D8%B2_%D8%B7%D8%B1%DB%8C%D9%82_%D9%88%D8%A8%DA%AF%D8%A7%D9%87) قرار می‌دهد. البته که می‌توانید مستقیما HTML را از طریق ری‌اکت وارد کنید، اما باید بنویسید `dangerouslySetInnerHTML` و یک شئ با کلید `__html` در آن قرار بدهید تا به خودتان یادآوری کنید که کار خطرناکی کرده‌اید. برای مثال: ```js function createMarkup() { @@ -54,20 +52,17 @@ function MyComponent() { ### onChange {#onchange} -رویداد `onChange` رفتاری که از او انتظار میرود را دارد: هر وقت که یک مکان درون فرم تغییر کند، این رویداد به صدا در میاید. ما مخصوصا از رفتار موجود مرورگر استفاده نمی‌کنیم، چون `onChange` یک اشتباه لغتیست برای کاری که انجام میدهد و اینکه ری‌اکت به این رویداد برای رسیدگی بی‌درنگ به ورودی کاربر تکیه می‌کند. +رویداد `onChange` رفتاری که از او انتظار می‌رود را دارد: هر وقت که یک فیلد از فرم تغییر کند، این رویداد به صدا در می‌آید. ما مخصوصا از رفتار موجود مرورگر استفاده نمی‌کنیم، چون `onChange` یک اشتباه لغتیست برای کاری که انجام میدهد و اینکه ری‌اکت به این رویداد برای رسیدگی بی‌درنگ به ورودی کاربر تکیه می‌کند. ### selected {#selected} -صفت `selected` توسط کامپوننت های `
``` -البته همه ویژگی‌های چیدمان به رشته های پیکسلی تبدیل نمی‌شوند. برخی از آنها بدون واحد باقی می‌مانند (مثلا `zoom`, `order`, `flex`). لیست کامل این ویژگی‌های بدون واحد در [اینجا](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) قابل مشاهده است. +البته همه ویژگی‌های style به رشته و پیکسل تبدیل نمی‌شوند. برخی از آنها بدون واحد باقی می‌مانند (مثلا `zoom`، `order` و `flex`). لیست کامل این ویژگی‌های بدون واحد در [اینجا](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) قابل مشاهده است. ### suppressContentEditableWarning {#suppresscontenteditablewarning} -معمولا، هر وفت که یک المنت والد به عنوان `contentEditable` علامت‌ گذاری می‌شود، هشداری به صدا در می‌آید، چون مشکل ساز خواهد شد. این صفت باعث می‌شود تا آن هشدار مسکوت باقی بماند. از این استفاده نکنید، مگر اینکه یک کتابخانه ای دارید می‌سازید مثل [Draft.js](https://facebook.github.io/draft-js/) که خودش به صورت دستی `contentEditable` را مدیریت می‌کند. +معمولا، هر وقت که یک المنت والد به عنوان `contentEditable` علامت‌ گذاری می‌شود، هشداری به صدا در می‌آید، چون مشکل ساز خواهد شد. این صفت باعث می‌شود تا آن هشدار مسکوت باقی بماند. از این استفاده نکنید، مگر اینکه یک کتابخانه ای دارید می‌سازید مثل [Draft.js](https://facebook.github.io/draft-js/) که خودش به صورت دستی `contentEditable` را مدیریت می‌کند. ### suppressHydrationWarning {#suppresshydrationwarning} -اگر از rendering درون-سروری ری‌اکت استفاده می‌کنید، در صورتی که محتوای render شده سرویس گیرنده با محتوای render شده سرور متفاوت باشد، هشداری دریافت می‌کنید. -البته، در برخی موارد خیلی سخت است که دقیقا با همدیگر جور بشوند. برای مثال مهر زمان ها بین سرور و سرویس گیرنده متفاوت خواهند بود. +اگر از rendering سمت سروری ری‌اکت استفاده می‌کنید، در صورتی که محتوای render شده کلاینت با محتوای render شده سرور متفاوت باشد، هشداری دریافت می‌کنید. البته، در برخی موارد خیلی سخت است که دقیقا با همدیگر جور بشوند. برای مثال timestamp ها بین سرور و کلاینت متفاوت خواهند بود. -اگر شما `suppressHydrationWarning` را برای المنتی `true` کنید، ری‌اکت برای مغایرت های صفات و محتوای آن المنت به شما هشدار نخواهد داد. فقط تا یک سطح عمق کار خواهد کرد، و این هم به منظور یک راه فرار است، زیاد از آن استفاده نکنید. شما می‌توانید در مورد hydration بیشتر بخوانید [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate). +اگر شما `suppressHydrationWarning` را برای المنتی `true` کنید، ری‌اکت برای مغایرت‌های صفات و محتوای آن المنت به شما هشدار نخواهد داد. فقط تا یک سطح از عمق کار خواهد کرد، و این هم به منظور یک راه فرار است، زیاد از آن استفاده نکنید. شما می‌توانید در مورد hydration در [اسناد `ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) بیشتر بخوانید. ### value {#value} -صفت `value` توسط کامپوننت های `` و `