From 6d27a8739bdcb41404178779710cac70133807ac Mon Sep 17 00:00:00 2001 From: mrlahmar Date: Thu, 6 Jul 2023 22:07:05 +0100 Subject: [PATCH] translate conditional rendering page --- src/content/learn/conditional-rendering.md | 133 ++++++++++----------- 1 file changed, 66 insertions(+), 67 deletions(-) diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index cfd52320a..674375f7a 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -1,24 +1,24 @@ --- -title: Conditional Rendering +title: التصيير الشرطي (Conditional Rendering) --- -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +قد تحتاج مكوناتك في كثير من الأحيان إلى عرض أشياء مختلفة اعتمادًا على حالات مختلفة. في React، يمكنك عرض JSX شَرطيّا باستعمال صيغة JavaScript مثل تعليمات `if`، `&&` و عمليات `? :`. -* How to return different JSX depending on a condition -* How to conditionally include or exclude a piece of JSX -* Common conditional syntax shortcuts you’ll encounter in React codebases +* كيفية إرجاع JSX مختلف وفقًا لشرط معين؟ +* كيفية تضمين أو استبعاد جزء من JSX شَرطيّا +* اختصارات بناء الجمل الشرطية الشائعة التي ستصادفها في أكواد React. -## Conditionally returning JSX {/*conditionally-returning-jsx*/} +## إرجاع JSX شَرطيّا {/*conditionally-returning-jsx*/} -Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not: +لنفترض أن لديك مكون `PackingList` يقوم بعرض عدة مكونات `Item`، والتي يمكن تمييزها على أنها محزومة أو لا: @@ -52,9 +52,9 @@ export default function PackingList() { -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`. +لاحظ أن بعض مكونات `Item` لديها خاصية `isPacked` معينة إلى `true` بدلا من `false`. ترغب في إضافة علامة التحقق (✔) إلى العناصر المحزومة في حالة `isPacked={true}`. -You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so: +يمكنك كتابة ذلك باستخدام [تعليمة `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) على النحو التالي: ```js if (isPacked) { @@ -63,7 +63,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end: +إذا كانت خاصية `isPacked` صحيحة (true) ، فإن هذا الكود **يُرجع شجرة JSX مختلفة**. مع هذا التغيير ، تحصل بعض العناصر على علامة التحقق في النهاية: @@ -100,13 +100,13 @@ export default function PackingList() { -Try editing what gets returned in either case, and see how the result changes! +جرب تعديل ما يتم إرجاعه في كلتا الحالتين ، وشاهد كيف تتغير النتيجة! -Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript. +لاحظ أنك تقوم بإنشاء منطق تفريعي باستخدام تعليمات جافاسكريبت `if` و `return`. في React، يتم التحكم في التدفق (مثل الشروط) باستخدام JavaScript. -### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/} +### إرجاع لا شيء شَرطيّا باستعمال `null` {/*conditionally-returning-nothing-with-null*/} -In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`: +في بعض الحالات، قد لا ترغب في عرض أي شيء على الإطلاق. على سبيل المثال، قد ترغب في عدم عرض العناصر المحزومة. يجب على المكون أن يرجع قيمة. في هذه الحالة، يمكنك إرجاع القيمة `null`: ```js if (isPacked) { @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render. +إذا كانت قيمة `isPacked` صحيحة (true)، فلن يُرجع المكون شيئًا، أي `null`. وإلا، سيقوم بإرجاع JSX للعرض. @@ -152,23 +152,23 @@ export default function PackingList() { -In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that! +من الناحية العملية، إعادة قيمة `null` من مكون ليست شائعة لأنها قد تفاجئ المطور الذي يحاول عرضها. في كثير من الأحيان، ستقوم بتضمين المكون شَرطيّا أو استبعاده في JSX الخاص بالمكون الأب. إليك كيفية القيام بذلك! -## Conditionally including JSX {/*conditionally-including-jsx*/} +## تضمين JSX شَرطيّا {/*conditionally-including-jsx*/} -In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: +في المثال السابق، تحكمت في شجرة JSX (إن وجدت!) التي سيُرجعها المكون. ربما لاحظت بالفعل بعض التكرار في ناتج العرض: ```js
  • {name} ✔
    • ``` -is very similar to +مشابه جدًا لـ ```js
  • {name}
    • ``` -Both of the conditional branches return `
  • ...
    • `: +كلا الفرعين المشروطين يعيدان `
  • ...
    • `: ```js if (isPacked) { @@ -177,13 +177,13 @@ if (isPacked) { return
  • {name}
    • ; ``` -While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) +بينما هذا التكرار ليس ضارًا، إلا أنه قد يجعل الكود أكثر صعوبة في الصيانة. ماذا لو أردت تغيير قيمة className؟ ستضطر للقيام بذلك في مكانين في الكود! في مثل هذه الحالة ، يمكنك تضمين القليل من JSX شَرطيّا لجعل الكود الخاص بك أكثر [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) -### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} +### العامل (الثلاثي) الشرطي (`? :`) {/*conditional-ternary-operator--*/} -JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator". +يحتوي JavaScript على صيغة مضغوطة لكتابة تعبير شرطي -- [العامل الشرطي](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) أو ”العامل الثلاثي“. -Instead of this: +بدلا من هذا: ```js if (isPacked) { @@ -192,7 +192,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -You can write this: +يمكنك كتابة هذا: ```js return ( @@ -202,17 +202,17 @@ return ( ); ``` -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*. +يمكنك قرائتها على النحو التالي *”إذا كان `isPacked` صحيحا، إذا قم بعرض `name + ' ✔'`، وإلا (`:`) قم بعرض `name`“.* -#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/} +#### هل هذين المثالين متساويين تمامًا؟ {/*are-these-two-examples-fully-equivalent*/} -If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `
  • `. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works. +إذا كنت قادمًا من خلفية البرمجة كائنية التوجه ، فقد تفترض أن المثالين أعلاه يختلفان اختلافًا طفيفًا لأن أحدهما قد ينشئ "مثالين" مختلفين من `
  • `. لكن عناصر JSX ليست "أمثلة" لأنها لا تحتوي على أي حالة داخلية وليست عُقد DOM حقيقية. إنما هي أوصاف خفيفة، مثل المخططات. إذن هذان المثالان ، في الواقع ، متساويان تمامًا. يتم شرح كيفية [الحفاظ على الحالة وإعادة تعيينها](/learn/preserving-and-resetting-state) بالتفصيل. -Now let's say you want to wrap the completed item's text into another HTML tag, like `` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases: +الآن لنفترض أنك ترغب في وضع النص الخاص بالعناصر المكتملة في عنصر HTML إضافي ك`` لشطبه. يمكنك إضافة المزيد من الأسطر الجديدة والأقواس حتى يكون من الأسهل تضمين JSX إضافي في كل حالة: @@ -256,11 +256,11 @@ export default function PackingList() { -This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions. +هذا النمط يعمل بشكل جيد للشروط البسيطة، ولكن استخدمه باعتدال. إذا أصبحت مكوناتك فوضوية بسبب العلامات الشرطية المتداخلة، ففكر في استخراج المكونات الفرعية لتنظيف الأمور. في React، يعد الترميز جزءًا من الكود الخاص بك، لذا يمكنك استخدام أدوات مثل المتغيرات والدوال لترتيب التعبيرات المعقدة. -### Logical AND operator (`&&`) {/*logical-and-operator-*/} +### العامل المنطقي AND (`&&`) {/*logical-and-operator-*/} -Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`: +الاختصار الشائع الآخر الذي ستصادفه هو [العامل المنطقي AND (&&) في JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). داخل مكونات React، غالبًا ما تظهر عندما تريد عرض بعض JSX فقط عندما يكون الشرط صحيحًا، **وعدم عرض أي شيء في حالة الشرط الغير صحيح**. باستخدام العامل `&&`، يمكنك عرض علامة التحقق شَرطيّا فقط إذا كانت قيمة `isPacked` صحيحة `true`: ```js return ( @@ -270,9 +270,9 @@ return ( ); ``` -You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*. +يمكنك قرائتها على النحو التالي *"إذا `isPacked`، إذا (`&&`) اعرض علامة التحقق، وإلا، لا تقم بعرض أي شيء"* -Here it is in action: +وإليك كيف يتم تطبيقها عمليًا: @@ -310,30 +310,29 @@ export default function PackingList() { -A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place. - +[عبارة && في JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) تقوم بارجاع الجانب الأيمن من العبارة (في حالتنا، علامة التحقق) إذا كان الجانب الأيسر (شرطنا) صحيحًا `true`. ولكن إذا كان الشرط غير صحيح `false`، فإن التعبير بأكمله يصبح غير صحيح `false`. يعتبر React القيمة الغير صحيحة `false` "فجوة" في شجرة JSX، تمامًا مثل القيمتين `null` أو `undefined`، ولا يتم عرض أي شيء مكانها. -**Don't put numbers on the left side of `&&`.** +**لا تضع أرقامًا على الجانب الأيسر من `&&`.** -To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing. +لاختبار الشرط، يقوم JavaScript تلقائيًا بتحويل الجانب الأيسر إلى قيمة منطقية (boolean). ومع ذلك، إذا كان الجانب الأيسر هو الرقم `0`، فإن التعبير بأكمله يحصل على تلك القيمة (`0`)، وستقوم React بعرض الرقم `0` بدلاً من عدم عرض أي شيء. -For example, a common mistake is to write code like `messageCount &&

    New messages

    `. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself! +على سبيل المثال، من الأخطاء الشائعة كتابة كود مثل `messageCount &&

    New messages

    `. من السهل أن نفترض أنها لا تقوم بعرض أي شيء عندما تكون قيمة `messageCount` هي `0`، ولكنها في الواقع تقوم بعرض الرقم `0` نفسه! -To fix it, make the left side a boolean: `messageCount > 0 &&

    New messages

    `. +لإصلاح ذلك، قم بتحويل الجانب الأيسر إلى عبارة منطقية (boolean): `messageCount > 0 &&

    New messages

    `.     -### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/} +### إسناد JSX شرطيًا إلى متغير {/*conditionally-assigning-jsx-to-a-variable*/} -When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name: +عندما تعيق الاختصارات كتابة الكود، حاول استخدام عبارة `if` ومتغير. يمكنك إعادة تعيين المتغيرات المعرفة بـ [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) ، لذا ابدأ بتوفير المحتوى الافتراضي الذي تريد عرضه ، الاسم: ```js let itemContent = name; ``` -Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`: +استخدم تعليمة `if` لإعادة تعيين تعبير JSX إلى `itemContent` إذا كانت قيمة `isPacked` صحيحة `true`. ```js if (isPacked) { @@ -341,7 +340,7 @@ if (isPacked) { } ``` -[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX: +[الأقواس المنحنية تفتح ”نافذة إلى JavaScript“.](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) قم بتضمين المتغير بواسطة الأقواس المنحنية في شجرة JSX المُرجَعة، مدمجًا التعبير المحسوب سابقا داخل JSX: ```js
  • @@ -349,7 +348,7 @@ if (isPacked) {
    • ``` -This style is the most verbose, but it's also the most flexible. Here it is in action: +هذا النمط هو الأكثر تفصيلاً، ولكنه أيضًا الأكثر مرونة. وإليك كيف يتم تطبيقه عمليًا: @@ -391,7 +390,7 @@ export default function PackingList() { -Like before, this works not only for text, but for arbitrary JSX too: +كما هو الحال من قبل، لا يعمل هذا فقط مع النصوص ولكن أيضًا لأي JSX تريده: @@ -437,16 +436,16 @@ export default function PackingList() { -If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work. +إذا لم تكن معتادًا على استخدام JavaScript، فإن هذا التنوع في الأنماط قد يبدو مُرهِقًا في البداية. ومع ذلك، ستساعدك معرفة هذه الأنماط على قراءة وكتابة أي كود JavaScript - وليس فقط مكونات React! اختر الأسلوب الذي تفضله كبداية، وعُد لهذا المرجع مرة أخرى إذا نسيت كيفية عمل الأساليب الأخرى. -* In React, you control branching logic with JavaScript. -* You can return a JSX expression conditionally with an `if` statement. -* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces. -* In JSX, `{cond ? : }` means *"if `cond`, render ``, otherwise ``"*. -* In JSX, `{cond && }` means *"if `cond`, render ``, otherwise nothing"*. -* The shortcuts are common, but you don't have to use them if you prefer plain `if`. +* في React ، يمكنك التحكم في منطق التفريع باستخدام JavaScript. +* يمكنك إرجاع تعبير JSX شرطيًا باستخدام تعليمة `if`. +* يمكنك حفظ تعبير JSX شرطيًا في متغير ومن ثم تضمينه داخل تعبير JSX آخر باستخدام الأقواس المنحنية. +* في JSX، `{cond ? : }` تعني *”إذا `cond`, اعرض ``, وإلا قم بعرض ``“*. +* في JSX، `{cond && }` تعني *”إذا `cond`، اعرض ``، وإلا لا تقم بعرض أي شيء“*. +* الاختصارات شائعة، ولكن ليس عليك استخدامها إذا كنت تفضل استخدام `if`. @@ -454,9 +453,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh -#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/} +#### عرض أيقونة للعناصر غير المكتملة باستخدام `? :` {/*show-an-icon-for-incomplete-items-with--*/} -Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`. +استخدم العامل الشرطي `(cond ? a : b)` لعرض ❌ إذا لم تكن قيمة `isPacked` صحيحة `true`. @@ -534,15 +533,15 @@ export default function PackingList() { -#### Show the item importance with `&&` {/*show-the-item-importance-with-*/} +#### إظهار أهمية العنصر باستخدام `&&` {/*show-the-item-importance-with-*/} -In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this: +في هذا المثال، يتلقى كل عنصر `Item` خاصية رقمية `importance`. استخدم العامل `&&` لعرض "_(Importance: X)_" بخط مائل (italics)، ولكن فقط للعناصر ذات أهمية غير صفرية. ستكون قائمة العناصر الخاصة بك على النحو التالي: * Space suit _(Importance: 9)_ * Helmet with a golden leaf * Photo of Tam _(Importance: 6)_ -Don't forget to add a space between the two labels! +لا تنسَ إضافة مسافة بين الوسمين! @@ -582,7 +581,7 @@ export default function PackingList() { -This should do the trick: +هذا ينبغي أن يقوم بالعملية: @@ -624,15 +623,15 @@ export default function PackingList() { -Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result! +لاحظ أنه يجب كتابة `importance > 0 && ...` بدلاً من `importance && ...` حتى لا يتم عرض القيمة `0` كنتيجة إذا كانت قيمة `importance` هي `0`. -In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. +في هذا الحل، يتم استخدام شرطين منفصلين لإدراج مسافة بين الاسم ووسم الأهمية. بدلاً من ذلك، يمكنك استخدام مكوّن الأجزاء (fragment) مع إضافة مسافة في البداية: `importance > 0 && <> ...` أو إضافة مسافة مباشرة داخل عنصر ``: `importance > 0 && ...`. -#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/} +#### إعادة هيكلة سلسلة من عبارات `? :` إلى تعليمة `if` ومتغيرات. {/*refactor-a-series-of---to-if-and-variables*/} -This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions. +يستخدم مكون `Drink` سلسلة من العبارات `? :` لعرض معلومات مختلفة اعتمادًا على قيمة الخاصية `name` إذا كانت "tea" أو "coffee". المشكلة هي تشتت المعلومات المتعلقة بكل مشروب عبر عدة شروط. قم بإعادة هيكلة هذا الكود لاستخدام تعليمة `if` واحدة بدلاً من ثلاث عبارات `? :`. @@ -665,11 +664,11 @@ export default function DrinkList() { -Once you've refactored the code to use `if`, do you have further ideas on how to simplify it? +بمجرد إعادة هيكلة الكود لاستخدام تعليمة `if`، هل لديك أفكار إضافية حول كيفية تبسيطه؟ -There are multiple ways you could go about this, but here is one starting point: +هناك طرق متعددة يمكنك اتباعها، ولكن إليك نقطة بداية مقترحة: @@ -712,9 +711,9 @@ export default function DrinkList() { -Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future. +هنا تم تجميع المعلومات المتعلقة بكل مشروب معًا بدلاً من نشرها عبر عدة شروط. هذا يسهل إضافة مشروبات إضافية في المستقبل. -Another solution would be to remove the condition altogether by moving the information into objects: +حل آخر سيكون بإزالة الشرط تمامًا من خلال نقل المعلومات إلى كائنات: