From b7c110176b8bd724467c198d488e1cf541f6ca24 Mon Sep 17 00:00:00 2001 From: Hossein Ahmadi Date: Sat, 20 Jun 2020 11:02:42 +0430 Subject: [PATCH 01/37] Fowrawrding Refs --- content/docs/forwarding-refs.md | 69 ++++++++++++++++++--------------- 1 file changed, 38 insertions(+), 31 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..26ac11644 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,73 +4,80 @@ title: Forwarding Refs permalink: docs/forwarding-refs.html --- -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +Ref forwarding یک تکنیک برای ارسال خودکار یک [ref](/docs/refs-and-the-dom.html) از طریق یک کامپوننت به فرزندانش می باشد. اینکار معمولا برای بسیاری از کامپوننت ها در اپلیکیشن لازم نیست. به هر حال، در بعضی از کامپوننت ها، به خصوص در کامپوننت های کتابخانه ای با قابلیت استفاده مجدد میتواند مفید باشد. رایج ترین حالات ممکن در زیر شرح داده شده اند. -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} +## فوروارد کردن refs به کامپوننت های DOM {#forwarding-refs-to-dom-components} -Consider a `FancyButton` component that renders the native `button` DOM element: +یک کامپوننت `FancyButton` که المنت محلی `button` در DOM را رندر می کند در نظر بگیرید: `embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +کامپوننت های ری‌اکت جزئیات پیاده سازی، شامل خروجی رندر شده خود را پنهان می کنند. کامپوننت های دیگر که از `FancyButton` استفاده می کنند، معمولا به [بدست آوردن یک ref](/docs/refs-and-the-dom.html) به المنت DOM `button` داخلی **نیازی نخواهند داشت** و این به علت جلوگیری از تکیه بیش از اندازه کامپوننت ها به ساختار DOM یکدیگر خوب است. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +اگرچه چنین کپسوله سازی برای کامپوننت های appication-level مانند `FeedStory` یا `Comment` مطلوب است، برای کامپوننت های "لایه ای" با قابلیت استفاده مجدد بالا مانند `FancyButton` یا `MyTextInput` نامناسب می باشد. این کامپوننت ها میل به استفاده شدن در اپلیکیشن به یک شیوه مشابه به عنوان یک `button` و `input` معمولی DOM دارند و دسترسی به نودهای DOM آن ها برای مدیریت انیمیشن ها، focus و selection ممکن است اجتناب ناپذیر باشد. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** +**Ref forwarding یک قابلیت انتخابی است که به بعضی کامپوننت ها اجازه گرفتن یک `ref` و انتقال آن به فرزندان (به عبارت دیگر, "فوروارد کردن" آن) را می دهد.** -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +در مثال زیر، `FancyButton` از `React.forwardRef` برای گرفتن `ref` که به آن منتقل شده استفاده می کند، و سپس آن را به `button` DOM که رندر می کند فوروارد می کند. `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +با این روش، کامپوننت هایی که از `FancyButton` استفاده می کنند، می توانند یک ref به نود `button` در DOM بگیرند و در صورت نیاز، به همان شکلی که از یک `button` در DOM مستقیما استفاده می کنند، از این کامپوننت نیزبهره ببرند. -Here is a step-by-step explanation of what happens in the above example: +در زیر، یک توضیح مرحله به مرحله از آنچه در مثال بالا اتفاق افتاده است مشاهده می نمایید: -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to `