اذهب إلى المحتوى

السؤال

نشر

السلام عليكم   المشكلة هل خاصية props.children لم تعد تعمل في تحديتات الجديده. الاكواد الموجودة في صور اسفله عندما اتبع تعليمات الفيديو لا تعمل خاصية props.chilren. هل هذا بسبب استعمالي ل اكواد "react-router-dom": "^6.8.0"

Q1.png

Q2.png

Q3.png

Recommended Posts

  • 0
نشر
بتاريخ On 8‏/2‏/2023 at 21:43 قال Issam Bourouail:

 هذا هو رابط الاكواد https://github.com/issambour/app-one

اردت استخدام خاصية props.children على ملف MainContet.js  وربطه بي ملف Javascript.js  

هذه صور تبين ما اريد فعله لماذا لا يضهر عنصر   <p>wellcome</p> الموجود في ملف Javascript.js  عند كتابة 

<p>{props.children}</p>  t في ملف MainContent.js

 

 

3.png

4.png

الكود يعمل يا صديقي  😂

يتم طباعة النص في أسفل الصفحة علي اليسار ولكن المشكلة هي أن لون النص أبيض فلا يظهر 

Capture.PNG

  • 0
نشر (معدل)

انت لم تستخدم children من الأساس 

طريقة استخدامها تكون كالمثال التالي :

App.jsx

import { RowList, Row } from './RowList.js';

export default function App() {
  return (
    <RowList>
      <Row>
        <p>This is the first item.</p>
      </Row>
      <MoreRows />
    </RowList>
  );
}

function MoreRows() {
  return (
    <>
      <Row>
        <p>This is the second item.</p>
      </Row>
      <Row>
        <p>This is the third item.</p>
      </Row>
    </>
  );
}

RowList.jsx

import { RowList, Row } from './RowList.js';

export default function App() {
  return (
    <RowList>
      <Row>
        <p>This is the first item.</p>
      </Row>
      <MoreRows />
    </RowList>
  );
}

function MoreRows() {
  return (
    <>
      <Row>
        <p>This is the second item.</p>
      </Row>
      <Row>
        <p>This is the third item.</p>
      </Row>
    </>
  );
}

أما إن كنت تقصد ال props فالطريقة التي قمت بها من المفترض أنها صحيحة. 

المشكلة قد تكون من طريقة استخدامك react-router. 

جرب طباعة بعض النصوص دون استخدام props للتأكد من أنها تعمل.

أو قم بمشاركة ملفات المشروع حتى مكنني مساعدتك.

تم التعديل في بواسطة أحمد رضا5
  • 0
نشر

 هذا هو رابط الاكواد https://github.com/issambour/app-one

اردت استخدام خاصية props.children على ملف MainContet.js  وربطه بي ملف Javascript.js  

هذه صور تبين ما اريد فعله لماذا لا يضهر عنصر   <p>wellcome</p> الموجود في ملف Javascript.js  عند كتابة 

<p>{props.children}</p>  t في ملف MainContent.js

 

 

3.png

4.png

  • 0
نشر
بتاريخ 9 ساعة قال Issam Bourouail:

شكر على جوابك ولاكن لماذا  وضع عنصر p داخل عنصر p اخر  ولمذا اخد هذه الخاصية لون ابيض 

Capture d’écran 2023-02-12 083747.png

السبب هو أنك تورث العنصر p كأبن 

    <MainContent content_page = 'JavaScript Page' >
      <p>wellcome</p>
    </MainContent>

فيتم توريثه مره اخري داخل عنصر p آخر في ال component 

      <p>{props.children}</p>

قم بحذف أحد واحد منهم 

    <MainContent content_page = 'JavaScript Page' >
		wellcome
    </MainContent>

والسبب في ان النص لونه أبيض هو أنك أعطيت جميع العناصر اللون الأبيض كما في الكود الأتي:

* {
    margin: 0;
    padding: 0;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    list-style: none;
    letter-spacing: 1px;
}

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...