عند اتباع اكواد الموجوده في فيدو و استعمال props.children لايضهر محتوى

بتاريخ 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

 

 

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

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

لا يظهر  في الصور التي ارفقتها اين استخدمت الـ children .

هل يمكنك مشاركة ملفات المشروع حتى استطيع الاطلاع على سبب المشكلة.

انت لم تستخدم 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 للتأكد من أنها تعمل.

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

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

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

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

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

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

بتاريخ 9 ساعة قال Issam Bourouail:

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

السبب هو أنك تورث العنصر 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;
}