From d2484f6473e3888f7a82e84215a0b7ce32bfde93 Mon Sep 17 00:00:00 2001 From: Forough Fallah Date: Wed, 10 Apr 2019 15:37:52 +0430 Subject: [PATCH 01/16] done with translation of conditional-rendering --- content/docs/conditional-rendering.md | 64 ++++++++++++++------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7df19bb98..b2b3891ec 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -1,6 +1,6 @@ --- id: conditional-rendering -title: Conditional Rendering +title: رندر شرطی permalink: docs/conditional-rendering.html prev: handling-events.html next: lists-and-keys.html @@ -8,11 +8,12 @@ redirect_from: - "tips/false-in-jsx.html" --- -In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. + در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید تا رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید بعضی از این کامپوننت‌ها را، بسته به state برنامه، رندر کنید . -Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them. +رندر شرطی در ری اکت دقیقا مشابه «شرط‌ها» در جاوا‌اسکریپت کار میکند. +از عملگر‌های جاوااسکریپت مثل کلمه کلیدی [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) یا عملگر شرطی [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) برای ایجاد المنت‌هایی که state کنونی را نشان می‌دهند، استفاده کنید و بگذارید ری اکت UI را بروزرسانی کند تا با این شرط ها منطبق شود. -Consider these two components: +این دو کامپوننت را در نظر بگیرید: ```js function UserGreeting(props) { @@ -24,7 +25,7 @@ function GuestGreeting(props) { } ``` -We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: + در ادامه ما یک کامپوننت تحت عنوان `Greeting` می‌سازیم، که یکی از دو کامپوننت اشاره شده در بالا را بر حسب اینکه یک کاربر لاگین کرده یا خیر، نشان می‌دهد: ```javascript{3-7,11,12} function Greeting(props) { @@ -36,21 +37,21 @@ function Greeting(props) { } ReactDOM.render( - // Try changing to isLoggedIn={true}: + //در خط زیر مقدار isLoggedIn را به true تغییر دهید‌‌(isLoggedIn={true}): , document.getElementById('root') ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -This example renders a different greeting depending on the value of `isLoggedIn` prop. +در مثال بالا، هر بار یک پیام خوش آمد‌گویی متفاوت بر‌اساس مقدارprop ای که `isLoggedIn` نام دارد، رندر می‌شود. -### Element Variables {#element-variables} +### متغیر‌های المان‌ها {#element-variables} -You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change. +برای ذخیره سازی المان‌ها می‌توان از متغیرها کمک گرفت، استفاده از این روش باعث می‌شود تا بتوان بخشی از یک کامپوننت را به‌صورت شرطی، رندر کرده در حالیکه بقیه خروجی کامپوننت تغییری نمی‌کند. -Consider these two new components representing Logout and Login buttons: +این دو کامپوننت جدید رو در نظر بگیرید که به ترتیب نمایانگر دکمه ورود (Login) و خروج (Logout) هستند. ```js function LoginButton(props) { @@ -70,9 +71,10 @@ function LogoutButton(props) { } ``` -In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`. +در مثال زیر، یک [ کامپوننتstateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) + به نام`LoginControl` می‌سازیم. -It will render either `` or `` depending on its current state. It will also render a `` from the previous example: +این کامپوننت براساس state کنونی اش، یکی از کامپوننت‌های `` یا`` را رندر می‌کند. ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -116,13 +118,13 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below. +در حالیکه روش تعریف یک متغیر و استفاده از عبارت شرطی `if`، یک روش خوب برای رندر شرطی است؛ گاهی ممکن است شما نیاز به یک syntax کوتاه‌تر داشته باشید. چندین روش برای شرط های خطی در JSX وجود دارد که در زیر توضیح داده شده است: -### Inline If with Logical && Operator {#inline-if-with-logical--operator} +### If خطی بااستفاده از اپراتور && منطقی {#inline-if-with-logical--operator} -You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element: +شما می‌توانید هر عبارتی (شامل عملگر ‍‍‍‍`&&` منطقی در جاوااسکریپت)‌را در JSX با استفاده از یک جفت `{}`،‌استفاده کنید:‌ر.ک. [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx)؛ استفاده از این روش برای اضافه کردن یک المان به‌صورت شرطی، میتواند مفید باشد: ```js{6-10} function Mailbox(props) { @@ -146,17 +148,16 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) +[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. +این روش جواب می‌دهد چرا که در جاوااسکریپت، حاصل `true && عبارت` همیشه برابر است با `عبارت` و همچنین حاصل `false && عبارت` ‍‍ همیشه برابر است با `false`. بنابراین اگر شرط برابر با `true` باشد، المانی که بلافاصله بعد از عملگر `&&` قرار گرفته است در خروجی نمایش داده خواهد شد و اگر حاصل شرط برابر با`false` باشد،‌ری‌اکت این عبارت را نادیده می‌گیرد. -Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it. +### If-Else خطی با عملگر شرطی {#inline-if-else-with-conditional-operator} -### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} +روش دیگری که برای رندر شرطی المان‌ها به‌صورت خطی استفاده می‌شود،‌استفاده از عملگر شرطی جاوااسکریپت [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) + است. -Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). - -In the example below, we use it to conditionally render a small block of text. +در مثال زیر ما از این روش استفاده می‌کنیم تا متن کوتاهی را به‌صورت شرطی رندر کنیم. ```javascript{5} render() { @@ -169,7 +170,7 @@ render() { } ``` -It can also be used for larger expressions although it is less obvious what's going on: +از این روش همچنین می‌توان برای عبارات شرطی طولانی‌تر استفاده نمود، اگرچه که در اینصورت کمتر مشخص است که در کد نوشته شده چه اتفاقی افتاده است: ```js{5,7,9} render() { @@ -186,13 +187,14 @@ render() { } ``` -Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components). +درست مثل زبان جاوااسکریپت،انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌همچنین این نکته را در نظر داشته باشید که هرگاه شرط‌ها بیش از انداره پیچیده شدند،بهتر است که از روش [استخراج یک کامپوننت](/docs/components-and-props.html#extracting-components) استفاده کنید. + +### جلوگیری از رندر شدن یک کامپوننت {#preventing-component-from-rendering} -### Preventing Component from Rendering {#preventing-component-from-rendering} +گاهی پیش می‌آید که بخواهید یک کامپوننت-حتی اگر توسط یک کامپوننت دیگر رندر شده باشد- خودش را مخفی کند. برای انجام این کار، عبارت `null` را به‌جای خروجی تابع رندر کامپوننت برگردانید. -In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output. +در مثال زیر، کامپوننت `` بر‌اساس مقدار prop ای به‌نام `warn` رندر می‌شود. اگر مقدار این prop برابر با`false` باشد، در اینصورت این کامپوننت رندر نخواهد شد. -In the example below, the `` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render: ```javascript{2-4,29} function WarningBanner(props) { @@ -238,6 +240,6 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called. +برگرداندن مقدار `null`از متد `render` یک کامپوننت، نحوه فراخوانی و اجرای متد‌های lifecycle کامپونتت را تحت تاثیر قرار نمی‌دهد.‌برای مثال متد `componentDidUpdate` همچنان فراخوانی خواهد شد. \ No newline at end of file From 3e20dd71d672c760f7e0757af485063e5adc851d Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Thu, 11 Apr 2019 21:22:19 +0430 Subject: [PATCH 02/16] Add some new words to the glossary The added words are based on the recent discussions on issue#41 --- TRANSLATION.md | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/TRANSLATION.md b/TRANSLATION.md index db42cae0d..80bb20e67 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -22,6 +22,22 @@ + + + ansestor + + + اجداد + + + + + attribute + + + خصوصیت + + breaking change @@ -46,6 +62,14 @@ کلاس + + + code spliting + + + جدا سازی کد + + component @@ -78,6 +102,14 @@ قابلیت + + + fragment + + + قطعه + + function @@ -86,6 +118,14 @@ تابع + + + higher-order + + + مرتبه بالایی + + hook @@ -94,6 +134,30 @@ هوک + + + legacy code + + + کد قدیمی + + + + + lifecycle + + + چرخه حیات + + + + + method + + + متد + + plugin @@ -102,6 +166,14 @@ پلاگین + + + property + + + خصوصیت + + react @@ -126,6 +198,14 @@ قالب + + + top-level + + + سطح بالایی + + UI @@ -267,6 +347,11 @@ store + + + syntactic sugar + + view From cbe6b68a3118c0593b6f9e0a436ca975c85a86a3 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Fri, 10 May 2019 21:18:26 +0430 Subject: [PATCH 03/16] Apply the improvements that was requested by myself The PR was left for 30 days and I decided to apply the changes and merge it inorder to prevent it from decaying --- content/docs/conditional-rendering.md | 59 ++++++++++++++------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index b2b3891ec..28f371843 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -1,6 +1,6 @@ --- id: conditional-rendering -title: رندر شرطی +title: رندر کردن شرطی permalink: docs/conditional-rendering.html prev: handling-events.html next: lists-and-keys.html @@ -8,10 +8,9 @@ redirect_from: - "tips/false-in-jsx.html" --- - در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید تا رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید بعضی از این کامپوننت‌ها را، بسته به state برنامه، رندر کنید . + در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید تا رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید فقط بعضی از این کامپوننت‌ها را، بسته به state برنامه، رندر کنید . -رندر شرطی در ری اکت دقیقا مشابه «شرط‌ها» در جاوا‌اسکریپت کار میکند. -از عملگر‌های جاوااسکریپت مثل کلمه کلیدی [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) یا عملگر شرطی [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) برای ایجاد المنت‌هایی که state کنونی را نشان می‌دهند، استفاده کنید و بگذارید ری اکت UI را بروزرسانی کند تا با این شرط ها منطبق شود. +رندر کردن شرطی در ری‌اکت همان‌طور کار می‌کند که شرط‌ها در جاوا‌اسکریپت کار می‌کنند. از عملگرهای جاوااسکریپت مانند [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) یا [عملگر شرطی (conditional operator)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) برای ساختن المنت‌هایی که نمایانگر state کنونی هستند، استفاده کند و بگذارید ری‌اکت UI را به‌روز رسانی کند تا با آن‌ها منطبق شود. این دو کامپوننت را در نظر بگیرید: @@ -25,7 +24,7 @@ function GuestGreeting(props) { } ``` - در ادامه ما یک کامپوننت تحت عنوان `Greeting` می‌سازیم، که یکی از دو کامپوننت اشاره شده در بالا را بر حسب اینکه یک کاربر لاگین کرده یا خیر، نشان می‌دهد: + در ادامه ما یک کامپوننت `Greeting` می‌سازیم که یکی از این کامپوننت‌ها را بسته به اینکه کاربر وارد شده‌است نشان می‌هد: ```javascript{3-7,11,12} function Greeting(props) { @@ -37,21 +36,21 @@ function Greeting(props) { } ReactDOM.render( - //در خط زیر مقدار isLoggedIn را به true تغییر دهید‌‌(isLoggedIn={true}): + // تغییر isLoggedIn={true} را امتحان کنید , document.getElementById('root') ); ``` -[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**روی CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -در مثال بالا، هر بار یک پیام خوش آمد‌گویی متفاوت بر‌اساس مقدارprop ای که `isLoggedIn` نام دارد، رندر می‌شود. +این مثال بر اساس مقدار prop با نام `isLoggedIn` یک [پیام] خوش‌آمد گویی متفاوت را رندر می‌کند. -### متغیر‌های المان‌ها {#element-variables} +### متغیر‌های المنت {#element-variables} -برای ذخیره سازی المان‌ها می‌توان از متغیرها کمک گرفت، استفاده از این روش باعث می‌شود تا بتوان بخشی از یک کامپوننت را به‌صورت شرطی، رندر کرده در حالیکه بقیه خروجی کامپوننت تغییری نمی‌کند. +شما می‌توانید از متغییرها برای ذخیره کردن المنت‌ها استفاده کنید. این به شما کمک می‌کند که بتوان بخشی از یک کامپوننت را به‌صورت شرطی، رندر کرده، درحالی‌که بقیه خروجی کامپوننت تغییری نمی‌کند. -این دو کامپوننت جدید رو در نظر بگیرید که به ترتیب نمایانگر دکمه ورود (Login) و خروج (Logout) هستند. +این دو کامپوننت جدید را در نظر بگیرید که نمایانگر دکمه‌های ورود (Login) و خروج (Logout) هستند. ```js function LoginButton(props) { @@ -71,10 +70,11 @@ function LogoutButton(props) { } ``` -در مثال زیر، یک [ کامپوننتstateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) - به نام`LoginControl` می‌سازیم. +در مثال زیر، یک [کامپوننت دارای state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) به نام `LoginControl` می‌سازیم. -این کامپوننت براساس state کنونی اش، یکی از کامپوننت‌های `` یا`` را رندر می‌کند. + + +این [کامپوننت] یکی از `` یا `` را براساس state کنونی رندر خواهد کرد. همچنین، یک `` را از مثال قبل رندر می‌کند: ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -118,13 +118,13 @@ ReactDOM.render( ); ``` -[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[**روی ‌CodePen امتحان کنید**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -در حالیکه روش تعریف یک متغیر و استفاده از عبارت شرطی `if`، یک روش خوب برای رندر شرطی است؛ گاهی ممکن است شما نیاز به یک syntax کوتاه‌تر داشته باشید. چندین روش برای شرط های خطی در JSX وجود دارد که در زیر توضیح داده شده است: +درحالی‌که تعریف یک متغیر و استفاده از عبارت شرطی `if`، یک روش خوب برای رندرکردن شرطی است؛ گاهی ممکن است شما بخواهید یک syntax کوتاه‌تر داشته باشید. چندین روش برای شرط های خطی در JSX وجود دارد که در زیر توضیح داده شده است: -### If خطی بااستفاده از اپراتور && منطقی {#inline-if-with-logical--operator} +### if خطی با استفاده از عملگر منطقی && {#inline-if-with-logical--operator} -شما می‌توانید هر عبارتی (شامل عملگر ‍‍‍‍`&&` منطقی در جاوااسکریپت)‌را در JSX با استفاده از یک جفت `{}`،‌استفاده کنید:‌ر.ک. [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx)؛ استفاده از این روش برای اضافه کردن یک المان به‌صورت شرطی، میتواند مفید باشد: +شما می‌توانید [هر expression را در JSX به صورت توکار](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx) با قراردادن در آکولاد بنویسید. این مورد شامل عملگر منطقی `&&` هم می‌شود. کاربرد آن برای اضافه‌کردن شرطی یک المنت است: ```js{6-10} function Mailbox(props) { @@ -148,14 +148,15 @@ ReactDOM.render( ); ``` -[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) +[**روی CodePen استفاده کنید**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) + +این روش جواب می‌دهد چرا که در جاوااسکریپت، حاصل `true && expression` همیشه برابر است با `expression` و همچنین حاصل `false && expression` ‍‍ همیشه برابر است با `false`. -این روش جواب می‌دهد چرا که در جاوااسکریپت، حاصل `true && عبارت` همیشه برابر است با `عبارت` و همچنین حاصل `false && عبارت` ‍‍ همیشه برابر است با `false`. بنابراین اگر شرط برابر با `true` باشد، المانی که بلافاصله بعد از عملگر `&&` قرار گرفته است در خروجی نمایش داده خواهد شد و اگر حاصل شرط برابر با`false` باشد،‌ری‌اکت این عبارت را نادیده می‌گیرد. +بنابراین اگر شرط برابر با `true` باشد، المانی که بلافاصله بعد از عملگر `&&` قرار گرفته است در خروجی نمایش داده خواهد شد و اگر حاصل شرط برابر با`false` باشد،‌ ری‌اکت این عبارت را نادیده می‌گیرد. -### If-Else خطی با عملگر شرطی {#inline-if-else-with-conditional-operator} +### if-else خطی با عملگر شرطی {#inline-if-else-with-conditional-operator} -روش دیگری که برای رندر شرطی المان‌ها به‌صورت خطی استفاده می‌شود،‌استفاده از عملگر شرطی جاوااسکریپت [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) - است. +روش دیگر رندر شرطی المان‌ها به‌صورت خطی،‌ استفاده از عملگر شرطی جاوااسکریپت [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) است. در مثال زیر ما از این روش استفاده می‌کنیم تا متن کوتاهی را به‌صورت شرطی رندر کنیم. @@ -170,7 +171,7 @@ render() { } ``` -از این روش همچنین می‌توان برای عبارات شرطی طولانی‌تر استفاده نمود، اگرچه که در اینصورت کمتر مشخص است که در کد نوشته شده چه اتفاقی افتاده است: +از این روش همچنین می‌توان برای عبارات شرطی طولانی‌تر استفاده نمود، اگرچه که در اینصورت کمتر مشخص است که **[**در کد نوشته شده**]** چه اتفاقی افتاده است: ```js{5,7,9} render() { @@ -187,13 +188,13 @@ render() { } ``` -درست مثل زبان جاوااسکریپت،انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌همچنین این نکته را در نظر داشته باشید که هرگاه شرط‌ها بیش از انداره پیچیده شدند،بهتر است که از روش [استخراج یک کامپوننت](/docs/components-and-props.html#extracting-components) استفاده کنید. +درست مثل جاوااسکریپت، انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌ همچنین این نکته را در نظر داشته باشید که هرگاه شرط‌ها بیش از انداره پیچیده شدند،بهتر است که [یک کامپوننت استخراج کنید](https://reactjs.org/docs/components-and-props.html#extracting-components). ### جلوگیری از رندر شدن یک کامپوننت {#preventing-component-from-rendering} -گاهی پیش می‌آید که بخواهید یک کامپوننت-حتی اگر توسط یک کامپوننت دیگر رندر شده باشد- خودش را مخفی کند. برای انجام این کار، عبارت `null` را به‌جای خروجی تابع رندر کامپوننت برگردانید. +در موارد نادر، ممکن است شما بخواهید یک کامپوننت - حتی اگر توسط یک کامپوننت دیگر رندر شده باشد - خودش را مخفی کند. برای انجام این کار، `null` را به‌جای خروجی رندر برگردانید. -در مثال زیر، کامپوننت `` بر‌اساس مقدار prop ای به‌نام `warn` رندر می‌شود. اگر مقدار این prop برابر با`false` باشد، در اینصورت این کامپوننت رندر نخواهد شد. +در مثال زیر، کامپوننت `` بر‌اساس مقدار prop ای به‌نام `warn` رندر می‌شود. اگر مقدار این prop برابر با`false` باشد، در اینصورت این کامپوننت رندر نخواهد کرد. ```javascript{2-4,29} @@ -240,6 +241,6 @@ ReactDOM.render( ); ``` -[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[**روی CodePen امتحان کنید**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -برگرداندن مقدار `null`از متد `render` یک کامپوننت، نحوه فراخوانی و اجرای متد‌های lifecycle کامپونتت را تحت تاثیر قرار نمی‌دهد.‌برای مثال متد `componentDidUpdate` همچنان فراخوانی خواهد شد. \ No newline at end of file +برگرداندن مقدار `null`از متد `render` یک کامپوننت، اجرای متد‌های چرخه حیاط کامپونتت را تحت تاثیر قرار نمی‌دهد.‌ برای مثال متد `componentDidUpdate` همچنان فراخوانی خواهد شد. \ No newline at end of file From 26aac006261c1ff0aa85ec8a803ae9155d73d7f1 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:43:34 +0200 Subject: [PATCH 04/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 28f371843..40f423215 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,7 +8,7 @@ redirect_from: - "tips/false-in-jsx.html" --- - در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید تا رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید فقط بعضی از این کامپوننت‌ها را، بسته به state برنامه، رندر کنید . + در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید که رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید فقط بعضی از این کامپوننت‌ها را بسته به state برنامه رندر کنید . رندر کردن شرطی در ری‌اکت همان‌طور کار می‌کند که شرط‌ها در جاوا‌اسکریپت کار می‌کنند. از عملگرهای جاوااسکریپت مانند [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) یا [عملگر شرطی (conditional operator)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) برای ساختن المنت‌هایی که نمایانگر state کنونی هستند، استفاده کند و بگذارید ری‌اکت UI را به‌روز رسانی کند تا با آن‌ها منطبق شود. @@ -243,4 +243,4 @@ ReactDOM.render( [**روی CodePen امتحان کنید**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -برگرداندن مقدار `null`از متد `render` یک کامپوننت، اجرای متد‌های چرخه حیاط کامپونتت را تحت تاثیر قرار نمی‌دهد.‌ برای مثال متد `componentDidUpdate` همچنان فراخوانی خواهد شد. \ No newline at end of file +برگرداندن مقدار `null`از متد `render` یک کامپوننت، اجرای متد‌های چرخه حیاط کامپونتت را تحت تاثیر قرار نمی‌دهد.‌ برای مثال متد `componentDidUpdate` همچنان فراخوانی خواهد شد. From 74ec2c0d1d10a0a867902b30c11287420149383b Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:43:54 +0200 Subject: [PATCH 05/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 40f423215..de2087ca8 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,7 @@ redirect_from: در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید که رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید فقط بعضی از این کامپوننت‌ها را بسته به state برنامه رندر کنید . -رندر کردن شرطی در ری‌اکت همان‌طور کار می‌کند که شرط‌ها در جاوا‌اسکریپت کار می‌کنند. از عملگرهای جاوااسکریپت مانند [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) یا [عملگر شرطی (conditional operator)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) برای ساختن المنت‌هایی که نمایانگر state کنونی هستند، استفاده کند و بگذارید ری‌اکت UI را به‌روز رسانی کند تا با آن‌ها منطبق شود. +رندر کردن شرطی در ری‌اکت همان‌طور کار می‌کند که شرط‌ها در جاوا‌اسکریپت کار می‌کنند. از عملگرهای جاوااسکریپت مانند [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) یا [عملگر شرطی (conditional operator)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) برای ساختن المنت‌هایی که نمایانگر state کنونی هستند، استفاده کنید و بگذارید ری‌اکت UI را به‌روز رسانی کند تا با آن‌ها منطبق شود. این دو کامپوننت را در نظر بگیرید: From 1b1ee15625cb52faef743a6019a267f61bc662ca Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:44:11 +0200 Subject: [PATCH 06/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index de2087ca8..bdc7f5153 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` - در ادامه ما یک کامپوننت `Greeting` می‌سازیم که یکی از این کامپوننت‌ها را بسته به اینکه کاربر وارد شده‌است نشان می‌هد: + در ادامه ما یک کامپوننت `Greeting` می‌سازیم که یکی از این کامپوننت‌ها را بسته به اینکه کاربر لاگین شده‌است نشان می‌هد: ```javascript{3-7,11,12} function Greeting(props) { From e1de105c0a90f6c923b69b15b025fc7629d8e09c Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:45:28 +0200 Subject: [PATCH 07/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index bdc7f5153..47a2fba37 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -44,7 +44,7 @@ ReactDOM.render( [**روی CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -این مثال بر اساس مقدار prop با نام `isLoggedIn` یک [پیام] خوش‌آمد گویی متفاوت را رندر می‌کند. +این مثال بر اساس مقدار prop با نام `isLoggedIn` یک [پیام] خوش‌آمد گویی متفاوتی را رندر می‌کند. ### متغیر‌های المنت {#element-variables} From 0efbfe1371a7cbdf115aee2f0916a02c99824a95 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:45:43 +0200 Subject: [PATCH 08/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 47a2fba37..51e4cd054 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -48,7 +48,7 @@ ReactDOM.render( ### متغیر‌های المنت {#element-variables} -شما می‌توانید از متغییرها برای ذخیره کردن المنت‌ها استفاده کنید. این به شما کمک می‌کند که بتوان بخشی از یک کامپوننت را به‌صورت شرطی، رندر کرده، درحالی‌که بقیه خروجی کامپوننت تغییری نمی‌کند. +شما می‌توانید از متغییرها برای ذخیره کردن المنت‌ها استفاده کنید. این به شما کمک می‌کند تا بتوانید بخشی از یک کامپوننت را به‌صورت شرطی، رندر کرده، درحالی‌که بقیه خروجی کامپوننت تغییری نمی‌کند. این دو کامپوننت جدید را در نظر بگیرید که نمایانگر دکمه‌های ورود (Login) و خروج (Logout) هستند. From 9c594e2a629f61dba1cbf272d46de42e3f3490c1 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:45:56 +0200 Subject: [PATCH 09/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 51e4cd054..b4e74f705 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -73,7 +73,6 @@ function LogoutButton(props) { در مثال زیر، یک [کامپوننت دارای state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) به نام `LoginControl` می‌سازیم. - این [کامپوننت] یکی از `` یا `` را براساس state کنونی رندر خواهد کرد. همچنین، یک `` را از مثال قبل رندر می‌کند: ```javascript{20-25,29,30} From b2eaffbaf95f5cd745c06066b898f7ebaac5cc5b Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:47:17 +0200 Subject: [PATCH 10/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index b4e74f705..70e13fa5b 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -73,7 +73,7 @@ function LogoutButton(props) { در مثال زیر، یک [کامپوننت دارای state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) به نام `LoginControl` می‌سازیم. -این [کامپوننت] یکی از `` یا `` را براساس state کنونی رندر خواهد کرد. همچنین، یک `` را از مثال قبل رندر می‌کند: +این [کامپوننت] یا `` یا `` را براساس state کنونی رندر خواهد کرد. همچنین، یک `` از مثال را قبل رندر می‌کند: ```javascript{20-25,29,30} class LoginControl extends React.Component { From d5abbfa1cd2a92607c5b5a571d4ef6a3073a96f2 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:47:37 +0200 Subject: [PATCH 11/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 70e13fa5b..17f512bd3 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -151,7 +151,7 @@ ReactDOM.render( این روش جواب می‌دهد چرا که در جاوااسکریپت، حاصل `true && expression` همیشه برابر است با `expression` و همچنین حاصل `false && expression` ‍‍ همیشه برابر است با `false`. -بنابراین اگر شرط برابر با `true` باشد، المانی که بلافاصله بعد از عملگر `&&` قرار گرفته است در خروجی نمایش داده خواهد شد و اگر حاصل شرط برابر با`false` باشد،‌ ری‌اکت این عبارت را نادیده می‌گیرد. +بنابراین اگر شرط برابر با `true` باشد، المنتی که بلافاصله بعد از عملگر `&&` قرار گرفته است در خروجی نمایش داده خواهد شد و اگر حاصل شرط برابر با`false` باشد،‌ ری‌اکت این عبارت را نادیده می‌گیرد. ### if-else خطی با عملگر شرطی {#inline-if-else-with-conditional-operator} From f5b9cb46055e1a4339a840dbfda8d54a013b970d Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:47:55 +0200 Subject: [PATCH 12/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 17f512bd3..caf5e9f03 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -189,7 +189,7 @@ render() { درست مثل جاوااسکریپت، انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌ همچنین این نکته را در نظر داشته باشید که هرگاه شرط‌ها بیش از انداره پیچیده شدند،بهتر است که [یک کامپوننت استخراج کنید](https://reactjs.org/docs/components-and-props.html#extracting-components). -### جلوگیری از رندر شدن یک کامپوننت {#preventing-component-from-rendering} +### جلوگیری از رندر شدن کامپوننت {#preventing-component-from-rendering} در موارد نادر، ممکن است شما بخواهید یک کامپوننت - حتی اگر توسط یک کامپوننت دیگر رندر شده باشد - خودش را مخفی کند. برای انجام این کار، `null` را به‌جای خروجی رندر برگردانید. From 165868b7ce582c7a5d1d647fc948db3b8dbdf348 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:48:24 +0200 Subject: [PATCH 13/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index caf5e9f03..11bdb29c9 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -187,7 +187,7 @@ render() { } ``` -درست مثل جاوااسکریپت، انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌ همچنین این نکته را در نظر داشته باشید که هرگاه شرط‌ها بیش از انداره پیچیده شدند،بهتر است که [یک کامپوننت استخراج کنید](https://reactjs.org/docs/components-and-props.html#extracting-components). +درست مثل جاوااسکریپت، انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌ همچنین به یاد داشته باشید که هرگاه شرط‌ها بیش از اندازه پیچیده شدند،ممکن است زمان خوبی باشه که [یک کامپوننت استخراج کنید](https://reactjs.org/docs/components-and-props.html#extracting-components). ### جلوگیری از رندر شدن کامپوننت {#preventing-component-from-rendering} From 1bb1bc283d77fc9df12030a35e297638e3b7a9e3 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:48:47 +0200 Subject: [PATCH 14/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 11bdb29c9..e6a9db36f 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -155,7 +155,7 @@ ReactDOM.render( ### if-else خطی با عملگر شرطی {#inline-if-else-with-conditional-operator} -روش دیگر رندر شرطی المان‌ها به‌صورت خطی،‌ استفاده از عملگر شرطی جاوااسکریپت [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) است. +روش دیگر رندر شرطی المنت‌ها به‌صورت خطی،‌ استفاده از عملگر شرطی جاوااسکریپت [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) است. در مثال زیر ما از این روش استفاده می‌کنیم تا متن کوتاهی را به‌صورت شرطی رندر کنیم. From 97cf3686f21dd6702d2179e7ee09511168733b98 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 15:49:00 +0200 Subject: [PATCH 15/16] Update content/docs/conditional-rendering.md Co-Authored-By: sJJdGG <25764288+sJJdGG@users.noreply.github.com> --- content/docs/conditional-rendering.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index e6a9db36f..e4c5074d8 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -188,7 +188,6 @@ render() { ``` درست مثل جاوااسکریپت، انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌ همچنین به یاد داشته باشید که هرگاه شرط‌ها بیش از اندازه پیچیده شدند،ممکن است زمان خوبی باشه که [یک کامپوننت استخراج کنید](https://reactjs.org/docs/components-and-props.html#extracting-components). - ### جلوگیری از رندر شدن کامپوننت {#preventing-component-from-rendering} در موارد نادر، ممکن است شما بخواهید یک کامپوننت - حتی اگر توسط یک کامپوننت دیگر رندر شده باشد - خودش را مخفی کند. برای انجام این کار، `null` را به‌جای خروجی رندر برگردانید. From 6885094a12092391d3a998d356592380802b2c11 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 16 Jun 2019 16:18:40 +0200 Subject: [PATCH 16/16] Apply some improvements suggested by @SJJdGG --- content/docs/conditional-rendering.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index e4c5074d8..bf0bbd405 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -72,7 +72,6 @@ function LogoutButton(props) { در مثال زیر، یک [کامپوننت دارای state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) به نام `LoginControl` می‌سازیم. - این [کامپوننت] یا `` یا `` را براساس state کنونی رندر خواهد کرد. همچنین، یک `` از مثال را قبل رندر می‌کند: ```javascript{20-25,29,30} @@ -192,7 +191,7 @@ render() { در موارد نادر، ممکن است شما بخواهید یک کامپوننت - حتی اگر توسط یک کامپوننت دیگر رندر شده باشد - خودش را مخفی کند. برای انجام این کار، `null` را به‌جای خروجی رندر برگردانید. -در مثال زیر، کامپوننت `` بر‌اساس مقدار prop ای به‌نام `warn` رندر می‌شود. اگر مقدار این prop برابر با`false` باشد، در اینصورت این کامپوننت رندر نخواهد کرد. +در مثال زیر، کامپوننت `` بر‌اساس مقدار prop ای به‌نام `warn` رندر می‌شود. اگر مقدار این prop برابر با`false` باشد، در این‌صورت این کامپوننت رندر نمی‌شود. ```javascript{2-4,29} @@ -241,4 +240,4 @@ ReactDOM.render( [**روی CodePen امتحان کنید**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -برگرداندن مقدار `null`از متد `render` یک کامپوننت، اجرای متد‌های چرخه حیاط کامپونتت را تحت تاثیر قرار نمی‌دهد.‌ برای مثال متد `componentDidUpdate` همچنان فراخوانی خواهد شد. +برگرداندن مقدار `null` از متد `render` یک کامپوننت، اجرای متد‌های چرخه حیاط کامپوننت را تحت تاثیر قرار نمی‌دهد.‌ برای مثال `componentDidUpdate` همچنان فراخوانی خواهد شد.