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 مانند `
``` -البته همه ویژگیهای چیدمان به رشته های پیکسلی تبدیل نمیشوند. برخی از آنها بدون واحد باقی میمانند (مثلا `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` توسط کامپوننت های `` و `