Conditional rendering #47
Conversation
* Update languages for Simplified Chinese completion * Update languages.yml
* removed line as functions can have state now too * removed this.setState line from docs
* Adding immer in the list of immutable libraries * Update optimizing-performance.md
This PR adds a relatively new sub-meetup-group of a Cloud Developers meetup group in the city of Lahore.
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Co-Authored-By: sorousht <soroush.torkzadeh@gmail.com>
Update TRANSLATION.md
With introduction of hooks, that statement is not valid anymore
Translate hello-world.md
Sync with reactjs.org @ d0f2db9
Merge fa into master
Chain React is a React Native focused conference put on yearly. This will be the 3rd year it has been held.
There was a problem hiding this comment.
@black-sheep777 عزیز،
ترجمه شما از کیفیت خوبی برخوردار بود و تغییراتی پیشنهادی به منظور نزدیک شدن ترجمه به متن اصلی است:
۱. به طور کلی در بعضی موارد پیشنهاد شده‌است که کلماتی حذف شود، زیرا در متن اصلی موجود نبود و در صورت نیاز برای بهتر شدن فهم مطلب، باید در کروشه قرار گیرد..
۲. چند مورد از عدم رعایت نیم‌فاصله و فاصله‌های بعد از کاما و نقطه مشاهده شد
اگر موردی بود، خوشحال می‌شم به من اطلاع بدهید.
| @@ -1,18 +1,19 @@ | |||
| --- | |||
| id: conditional-rendering | |||
| title: Conditional Rendering | |||
| title: رندر شرطی | |||
| permalink: docs/conditional-rendering.html | ||
| prev: handling-events.html | ||
| next: lists-and-keys.html | ||
| 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 برنامه، رندر کنید . |
There was a problem hiding this comment.
... می‌توانید فقط بعضی از این کامپوننت‌ها را، بسته به 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. | ||
| رندر شرطی در ری اکت دقیقا مشابه «شرط‌ها» در جاوااسکریپت کار میکند. |
There was a problem hiding this comment.
رندرکردن شرطی در ری‌اکت همان‌طور کار میکند که شرط‌ها در جاوااسکریپت کار می‌کنند. ...
|
|
||
| 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 را بروزرسانی کند تا با این شرط ها منطبق شود. |
There was a problem hiding this comment.
... از عملگرهای جاوااسکریپت مانند if یا عملگر شرطی (conditional operator) برای ساختن المنت‌هایی که نمایانگر state کنونی هستند، استفاده کند و بگذارید ری‌اکت UI را به‌روز رسانی کند تا با آن‌ها منطبق شود.
| @@ -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` می‌سازیم، که یکی از دو کامپوننت اشاره شده در بالا را بر حسب اینکه یک کاربر لاگین کرده یا خیر، نشان می‌دهد: | |||
There was a problem hiding this comment.
در ادامه ما یک کامپوننت Greeting می‌سازیم که یکی از این کامپوننت‌ها را بسته به اینکه کاربر وارد شده‌است نشان می‌هد:
| @@ -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) استفاده کنید. | |||
There was a problem hiding this comment.
۱. درست مثل زبان جاوااسکریپت، ...
۲. فاصله بعد از کاما
۳. فاصله بعد از نقطه
۴. ... بهتر است که یک کامپوننت استخراج کنید.
|
|
||
| ### Preventing Component from Rendering {#preventing-component-from-rendering} | ||
| گاهی پیش می‌آید که بخواهید یک کامپوننت-حتی اگر توسط یک کامپوننت دیگر رندر شده باشد- خودش را مخفی کند. برای انجام این کار، عبارت `null` را به‌جای خروجی تابع رندر کامپوننت برگردانید. |
There was a problem hiding this comment.
در موارد نادر، ممکن است شما گاهی پیش می‌آید که بخواهید یک کامپوننت - حتی اگر توسط یک کامپوننت دیگر رندر شده باشد - خودش را مخفی کند.
برای انجام این کار، عبارت 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. | ||
| در مثال زیر، کامپوننت `<WarningBanner />` بر‌اساس مقدار prop ای به‌نام `warn` رندر می‌شود. اگر مقدار این prop برابر با`false` باشد، در اینصورت این کامپوننت رندر نخواهد شد. |
There was a problem hiding this comment.
در اینصورت این کامپوننت رندر نخواهد شد کرد.
| @@ -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` همچنان فراخوانی خواهد شد. |
There was a problem hiding this comment.
۱. برگرداندن مقدار nullاز متد render یک کامپوننت، نحوه فراخوانی و اجرای متد‌های lifecycle کامپونتت را تحت تاثیر قرار نمی‌دهد.
۲. فاصله بعد از نقطه در آخر جمله
|
|
||
| Consider these two new components representing Logout and Login buttons: | ||
| این دو کامپوننت جدید رو در نظر بگیرید که به ترتیب نمایانگر دکمه ورود (Login) و خروج (Logout) هستند. |
There was a problem hiding this comment.
.به نظرم در متن این آموزش چون هیچ جا لحن محاوره ای نیست بهتره به جای رو از را استفاده بشه.
No description provided.