From 96e4d176fcb5bb206ed5ac2c5d4589d453498d90 Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Mon, 7 Aug 2023 16:45:13 +0300 Subject: [PATCH] fix some typo line 1 - 180 --- .../learn/passing-props-to-a-component.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index bb5a42910..9a98a808e 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -4,17 +4,17 @@ title: تمرير الخصائص إلى مكوّن -تستخدم مكوّنات React "الخصائص" (props) للتواصل مع بعضها البعض. يمكن لكل مكوّن أصلي تمرير بعض المعلومات إلى مكوّناته الفرعية عن طريق إعطائها الخصائص. قد تذكرك الخصائص بسمات HTML ، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها ، بما في ذلك الكائنات والمصفوفات والدوال. +تستخدم مكوّنات React "الخصائص" (props) للتواصل مع بعضها البعض. يمكن لكل مكوّن أب تمرير بعض المعلومات إلى مكوّناته الفرعية عن طريق إعطائها الخصائص. قد تذكرك الخصائص بسمات HTML ، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها ، بما في ذلك الكائنات والمصفوفات والدوال. -* كيفية تمرير الخصائص (props) إلى مكوّنات(Components) -* كيفية قراءة الخصائص (props) من مكوّن (Component) -* كيفية تحديد القيم الافتراضية للخصائص (props) -* كيفية تمرير بعض عناصر JSX إلى مكوّن (Component) -* كيف تتغير الخصائص (props) مع مرور الوقت +* كيفية تمرير الخصائص (props) إلى المكوّنات (Components) +* كيفية قراءة الخصائص من مكوّن +* كيفية تحديد القيم الافتراضية للخصائص +* كيفية تمرير بعض عناصر JSX إلى مكوّن +* كيف تتغير الخصائص مع مرور الوقت @@ -51,11 +51,11 @@ body { min-height: 120px; } -الخصائص التي يمكن تمريرها إلى وسم `` هي خصائص محدده مسبقًا (ReactDOM يتوافق مع [معيار الHTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). ولكن يمكنك تمرير أي خصائص إلى المكوّنات *الخاصة بك*, مثل ``, لتخصيصها. هنا كيف! +الخصائص التي يمكن تمريرها إلى وسم `` هي خصائص محدده مسبقًا (ReactDOM يتوافق مع [معيار الHTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). ولكن يمكنك تمرير أي خصائص إلى المكوّنات *الخاصة بك*, مثل ``, لتخصيصها. هنا كيفية ذلك! ## تمرير الخصائص إلى مكوّن {/*passing-props-to-a-component*/} -في هذا الكود, مكوّن ال `Profile` لا يمرر أي خصائص إلى مكوّنه الطفل, `Avatar`: +في هذا الكود, مكوّن ال `Profile` لا يمرر أي خصائص إلى مكوّنه الطفل، `Avatar`: ```js export default function Profile() { @@ -65,7 +65,7 @@ export default function Profile() { } ``` -يمكنك اعطاء `Avatar` بعض الخصائص في خطوتان. +يمكنك إعطاء `Avatar` بعض الخصائص في خطوتين. ### الخطوة الأولى: تمرير الخصائص إلى مكوّن طفل {/*step-1-pass-props-to-the-child-component*/} @@ -84,15 +84,15 @@ export default function Profile() { -إذا كنت تشعر بالحيرة بسبب الأقواس المزدوجة بعد `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 -الآن بمكنك قرائة هذه الخصائص داخل مكوّن ال`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 @@ -169,7 +169,7 @@ body { min-height: 120px; } -المكوّنات تتيح لك التفكير في المكوّنات الأبوية والمكوّنات الابنة بشكل مستقل. على سبيل المثال, يمكنك تغيير مكوّنات ال`person` أو ال`size` في داخل `Profile` دون الحاجة للتفكير في كيفية استخدامهما في المكوّن المسمى `Avatar`. بالمثل، يمكنك تغيير كيفية استخدام المكوّن `Avatar` لهذه الخصائص دون النظر إلى المكوّن `Profile`. +تتيح لك المكوّنات التفكير في المكوّنات الآباء والمكوّنات الأبناء بشكل مستقل. على سبيل المثال, يمكنك تغيير مكوّنات ال`person` أو ال`size` في داخل `Profile` دون الحاجة للتفكير في كيفية استخدامهما في المكوّن المسمى `Avatar`. بالمثل، يمكنك تغيير كيفية استخدام المكوّن `Avatar` لهذه الخصائص دون النظر إلى المكوّن `Profile`. يمكنك التفكير في الخصائص على أنها "أدوات تعديل" يمكنك تعديلها. إنها تؤدي نفس الدور الذي تؤديه الوسائط للدوال - في الواقع، الخصائص هي الوسيطة الوحيدة لمكوّنك! تقبل دوال المكوّنات في React وسيطة واحدة فقط، كائن خصائص