Skip to content

Commit

Permalink
fix some typo line 1 - 180
Browse files Browse the repository at this point in the history
  • Loading branch information
AhmedBaset authored Aug 7, 2023
1 parent 1b34d2f commit 96e4d17
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions src/content/learn/passing-props-to-a-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ title: تمرير الخصائص إلى مكوّن

<Intro>

تستخدم مكوّنات React "الخصائص" (props) للتواصل مع بعضها البعض. يمكن لكل مكوّن أصلي تمرير بعض المعلومات إلى مكوّناته الفرعية عن طريق إعطائها الخصائص. قد تذكرك الخصائص بسمات HTML ، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها ، بما في ذلك الكائنات والمصفوفات والدوال.
تستخدم مكوّنات React "الخصائص" (props) للتواصل مع بعضها البعض. يمكن لكل مكوّن أب تمرير بعض المعلومات إلى مكوّناته الفرعية عن طريق إعطائها الخصائص. قد تذكرك الخصائص بسمات HTML ، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها ، بما في ذلك الكائنات والمصفوفات والدوال.

</Intro>

<YouWillLearn>

* كيفية تمرير الخصائص (props) إلى مكوّنات(Components)
* كيفية قراءة الخصائص (props) من مكوّن (Component)
* كيفية تحديد القيم الافتراضية للخصائص (props)
* كيفية تمرير بعض عناصر JSX إلى مكوّن (Component)
* كيف تتغير الخصائص (props) مع مرور الوقت
* كيفية تمرير الخصائص (props) إلى المكوّنات (Components)
* كيفية قراءة الخصائص من مكوّن
* كيفية تحديد القيم الافتراضية للخصائص
* كيفية تمرير بعض عناصر JSX إلى مكوّن
* كيف تتغير الخصائص مع مرور الوقت

</YouWillLearn>

Expand Down Expand Up @@ -51,11 +51,11 @@ body { min-height: 120px; }

</Sandpack>

الخصائص التي يمكن تمريرها إلى وسم `<img>` هي خصائص محدده مسبقًا (ReactDOM يتوافق مع [معيار الHTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). ولكن يمكنك تمرير أي خصائص إلى المكوّنات *الخاصة بك*, مثل `<Avatar>`, لتخصيصها. هنا كيف!
الخصائص التي يمكن تمريرها إلى وسم `<img>` هي خصائص محدده مسبقًا (ReactDOM يتوافق مع [معيار الHTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). ولكن يمكنك تمرير أي خصائص إلى المكوّنات *الخاصة بك*, مثل `<Avatar>`, لتخصيصها. هنا كيفية ذلك!

## تمرير الخصائص إلى مكوّن {/*passing-props-to-a-component*/}

في هذا الكود, مكوّن ال `Profile` لا يمرر أي خصائص إلى مكوّنه الطفل, `Avatar`:
في هذا الكود, مكوّن ال `Profile` لا يمرر أي خصائص إلى مكوّنه الطفل، `Avatar`:

```js
export default function Profile() {
Expand All @@ -65,7 +65,7 @@ export default function Profile() {
}
```

يمكنك اعطاء `Avatar` بعض الخصائص في خطوتان.
يمكنك إعطاء `Avatar` بعض الخصائص في خطوتين.

### الخطوة الأولى: تمرير الخصائص إلى مكوّن طفل {/*step-1-pass-props-to-the-child-component*/}

Expand All @@ -84,15 +84,15 @@ export default function Profile() {

<Note>

إذا كنت تشعر بالحيرة بسبب الأقواس المزدوجة بعد `person=`, فتذكر [أنها مجرد كائن](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) داخل الأقواس المجعدة (curlies) في JSX
إذا كنت تشعر بالحيرة بسبب تكرار الأقواس المنحنية بعد `person=`, فتذكر [أنها مجرد كائن](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) داخل الأقواس المنحنية (curlies) في JSX

</Note>

الآن بمكنك قرائة هذه الخصائص داخل مكوّن ال`Avatar`.
الآن يمكنك قراءة هذه الخصائص داخل مكوّن ال`Avatar`.

### الخطوة الثانية: اقرأ المكوّنات داخل المكّون الطفل {/*step-2-read-props-inside-the-child-component*/}
### الخطوة الثانية: اقرأ الخصائص داخل المكّون الطفل {/*step-2-read-props-inside-the-child-component*/}

يمكنك قراءة هذه الخصائص (props) عن طريق كتابة أسمائها `person, size` مفصولة بفواصل داخل `({` و `})` مباشرة بعد `function Avatar`. هذا يتيح لك استخدامها داخل كود `Avatar`, كما تفعل مع المتغيرات.
يمكنك قراءة هذه الخصائص عن طريق كتابة أسمائها `person, size` مفصولة بفواصل داخل `({` و `})` مباشرة بعد `function Avatar`. هذا يتيح لك استخدامها داخل كود `Avatar`, كما تفعل مع المتغيرات.


```js
Expand Down Expand Up @@ -169,7 +169,7 @@ body { min-height: 120px; }

</Sandpack>

المكوّنات تتيح لك التفكير في المكوّنات الأبوية والمكوّنات الابنة بشكل مستقل. على سبيل المثال, يمكنك تغيير مكوّنات ال`person` أو ال`size` في داخل `Profile` دون الحاجة للتفكير في كيفية استخدامهما في المكوّن المسمى `Avatar`. بالمثل، يمكنك تغيير كيفية استخدام المكوّن `Avatar` لهذه الخصائص دون النظر إلى المكوّن `Profile`.
تتيح لك المكوّنات التفكير في المكوّنات الآباء والمكوّنات الأبناء بشكل مستقل. على سبيل المثال, يمكنك تغيير مكوّنات ال`person` أو ال`size` في داخل `Profile` دون الحاجة للتفكير في كيفية استخدامهما في المكوّن المسمى `Avatar`. بالمثل، يمكنك تغيير كيفية استخدام المكوّن `Avatar` لهذه الخصائص دون النظر إلى المكوّن `Profile`.

يمكنك التفكير في الخصائص على أنها "أدوات تعديل" يمكنك تعديلها. إنها تؤدي نفس الدور الذي تؤديه الوسائط للدوال - في الواقع، الخصائص هي الوسيطة الوحيدة لمكوّنك! تقبل دوال المكوّنات في React وسيطة واحدة فقط، كائن خصائص

Expand Down

0 comments on commit 96e4d17

Please sign in to comment.