From 5f5683158c3f4184042d40632b433f186249b3e6 Mon Sep 17 00:00:00 2001 From: Hossein Ahmadi Date: Sat, 13 Jun 2020 12:30:34 +0430 Subject: [PATCH 1/2] Forwarding refs documents and examples translated --- content/docs/forwarding-refs.md | 69 ++++++++++--------- .../customized-display-name.js | 4 +- examples/forwarding-refs/fancy-button-ref.js | 8 +-- .../fancy-button-simple-ref.js | 2 +- examples/forwarding-refs/fancy-button.js | 4 +- examples/forwarding-refs/log-props-after.js | 8 +-- 6 files changed, 51 insertions(+), 44 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 ` )); -// You can now get a ref directly to the DOM button: +// حالا می توانید مستقیما یک ref به DOM button بگیرید: const ref = React.createRef(); Click me!; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 9dcd13e16..ae4e7ff54 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// Rather than exporting FancyButton, we export LogProps. -// It will render a FancyButton though. +// بر خلاف اکسپورت کردن FancyButton، ما LogProps را اکسپورت می کنیم +// گرچه به هر حال FancyButton را رندر می کند // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index a603bd697..44071bb69 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -9,15 +9,15 @@ function logProps(Component) { // highlight-next-line const {forwardedRef, ...rest} = this.props; - // Assign the custom prop "forwardedRef" as a ref + // انتصاب یک props سفارشی "forwardedRef" به عنوان یک ref // highlight-next-line return ; } } - // Note the second param "ref" provided by React.forwardRef. - // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" - // And it can then be attached to the Component. + // توجه کنید که دومین پارامتر "ref" توسط React.forwardRef فراهم شده است. + // ما می توانیم آن را به عنوان یک props عادی، مانند "forwardedRef" به LogProps منتقل کنیم + // و سپس می تواند به کامپوننت متصل شود // highlight-range{1-3} return React.forwardRef((props, ref) => { return ; From 4da66e463fd9cd68eed1b85212bfcd27b3503c85 Mon Sep 17 00:00:00 2001 From: Hossein Ahmadi Date: Sat, 20 Jun 2020 10:31:13 +0430 Subject: [PATCH 2/2] Forwarding Refs translated --- examples/forwarding-refs/customized-display-name.js | 4 ++-- examples/forwarding-refs/fancy-button-ref.js | 8 ++++---- examples/forwarding-refs/fancy-button-simple-ref.js | 2 +- examples/forwarding-refs/fancy-button.js | 4 ++-- examples/forwarding-refs/log-props-after.js | 8 ++++---- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/forwarding-refs/customized-display-name.js b/examples/forwarding-refs/customized-display-name.js index a2cdfe14b..28bbd9203 100644 --- a/examples/forwarding-refs/customized-display-name.js +++ b/examples/forwarding-refs/customized-display-name.js @@ -7,8 +7,8 @@ function logProps(Component) { return ; } - // به این کامپوننت نام نمایشی مناسب تری در DevTools بدهید. - // برای مثال "ForwardRef(logProps(MyComponent))" + // Give this component a more helpful display name in DevTools. + // e.g. "ForwardRef(logProps(MyComponent))" // highlight-range{1-2} const name = Component.displayName || Component.name; forwardRef.displayName = `logProps(${name})`; diff --git a/examples/forwarding-refs/fancy-button-ref.js b/examples/forwarding-refs/fancy-button-ref.js index d2bc0760b..36e15dd2d 100644 --- a/examples/forwarding-refs/fancy-button-ref.js +++ b/examples/forwarding-refs/fancy-button-ref.js @@ -3,10 +3,10 @@ import FancyButton from './FancyButton'; // highlight-next-line const ref = React.createRef(); -// کامپوننت FancyButton که ایمپورت کردیم کامپوننت مرتبه بالاتر LogProps می باشد. -// با وجود اینکه خروجی رندر شده یکسان خواهد بود، -// ref ما به جای کامپوننت داخلی FancyButton به LogPrpos اشاره خواهد کرد! -// و این یعنی برای مثال نمی توانیم تابع ref.current.focus() را فراخوانی کنیم +// The FancyButton component we imported is the LogProps HOC. +// Even though the rendered output will be the same, +// Our ref will point to LogProps instead of the inner FancyButton component! +// This means we can't call e.g. ref.current.focus() // highlight-range{4} ( )); -// حالا می توانید مستقیما یک ref به DOM button بگیرید: +// You can now get a ref directly to the DOM button: const ref = React.createRef(); Click me!; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index ae4e7ff54..9dcd13e16 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// بر خلاف اکسپورت کردن FancyButton، ما LogProps را اکسپورت می کنیم -// گرچه به هر حال FancyButton را رندر می کند +// Rather than exporting FancyButton, we export LogProps. +// It will render a FancyButton though. // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index 44071bb69..a603bd697 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -9,15 +9,15 @@ function logProps(Component) { // highlight-next-line const {forwardedRef, ...rest} = this.props; - // انتصاب یک props سفارشی "forwardedRef" به عنوان یک ref + // Assign the custom prop "forwardedRef" as a ref // highlight-next-line return ; } } - // توجه کنید که دومین پارامتر "ref" توسط React.forwardRef فراهم شده است. - // ما می توانیم آن را به عنوان یک props عادی، مانند "forwardedRef" به LogProps منتقل کنیم - // و سپس می تواند به کامپوننت متصل شود + // Note the second param "ref" provided by React.forwardRef. + // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" + // And it can then be attached to the Component. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ;