Adam Ebrahim نشر 29 مارس 2021 أرسل تقرير مشاركة نشر 29 مارس 2021 ما أريد فعله هو عمل مكون يأخذ props لتحدد ما إن كان العنصر سيكون من نوع h1 - h2 - h3 - h4 - h5 - h6 بالشكل التالي: <h{this.props.num}>{this.props.content}</h{this.props.num}> حاولت أن أستعمل المكون كالتالي: <CustomTag num="1" content="Hello, World!" /> وتوقعت أن تكون النتيجة كالتالي: <h2>Hello, World!</h2> لكن يبدو أن الطريقة السابقة لا تعمل، هل هناك حل بدل من إستعمال جمل if متعددة لتحديد نوع العنصر؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Abdullah Muhammad نشر 29 مارس 2021 أرسل تقرير مشاركة نشر 29 مارس 2021 جميل جدا هذا السؤال يمكنك أن تستخدم الكود التالي return React.createElement(this.props.tagName , this.props, this.props.content); بكل بساطة الطريقة الأسهل التي نستخدمها لكتابة مكونات ريأكت تسمى ب jsx وهي تبسيط للشكل المرفق لا أكثر ففي حالتنا يمكننا إستخدام الكود المرفق لانشاء المكون بالشكل الذي تريده بطريقة بسيطه حيث أن: this.props.tagName: هي اسم المكون الذي تريده على سبيل المثال في حالتنا هذه h1 أو h2 أو h3....إلخ this.props: هنا كل ال props يتم إعطاءها للمكون this.props.content: هنا كل ال children أو الأبناء لهذا المكون وفي حالتنا هذه هو المحتوى الذي نود عرضه فعلى سبيل المثال لو كتبنا بطريقة jsx الكود التالي <ComponentName color="blue" shadowSize={2}> Content Content </ComponentName> ف ريأكت تقوم بتحويل هذا الكود إلى الكود التالي وتتعامل معه React.createElement( ComponentName, {color: 'blue', shadowSize: 2}, 'Content Content' ) عسى أن يكون الأمر واضحا ومبسطا. بالتوفيق إن شاء الله. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد أيت لعرايك نشر 29 مارس 2021 أرسل تقرير مشاركة نشر 29 مارس 2021 في حالة العناوين الديناميكية (h1 ، h2 ...) ، يمكن للمكون إرجاع React.createElement على هذا النحو. const Heading = ({level, children, ...props}) => { return React.createElement(`h${level}`, props , children) } ويمكن تمرير كل من الدعائم والأطفال. <div> <Heading level={1}>Heading 1</Heading> <Heading level={2}>Heading 2</Heading> <Heading level={3}>Heading 3</Heading> </div> النتيجة Heading 1 <!-- بخط كبير --> Heading 2 <!-- بخط متوسط--> Heading 3 <!-- بخط صغر --> 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Wael Aljamal نشر 29 مارس 2021 أرسل تقرير مشاركة نشر 29 مارس 2021 لا نستطيع تفسير التعابير ضمن شيفرة JSX حسب التوثيق الرسمي إنما نستطيع تعريف مكون ديناميكي و من ثم استخدامه كمثال بسيط: const Heading = "h" + 1; . . return <Heading>...</Heading>; كمثال كامل: لاحظ تمرير المتغير level حيث يتم تعريف ال HTML TAG قبل بنائه. function TypographyHeading({text, level}) { // Select heading <h1> - <h5>: const Heading = "h" + level; return ( <div> <Heading> {text} </Heading> </div> ); } 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Adam Ebrahim
ما أريد فعله هو عمل مكون يأخذ props لتحدد ما إن كان العنصر سيكون من نوع h1 - h2 - h3 - h4 - h5 - h6 بالشكل التالي:
حاولت أن أستعمل المكون كالتالي:
وتوقعت أن تكون النتيجة كالتالي:
لكن يبدو أن الطريقة السابقة لا تعمل، هل هناك حل بدل من إستعمال جمل if متعددة لتحديد نوع العنصر؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.