حل مشكلة خطأ في استيراد المكون في React

رجاءً قم بتزويدنا بالمشكلة التي تواجهها بالضبط و ارفق ملفات المشروع بالكامل حتى نستطيع اختبار الكود.

حاولت اسحب الملف ما زبط معي

يبدو أنّ المشكلة تتعلق بعدم استدعاء المكوّنات (components) من ملفاتها الخاصة بشكل صحيح.

يجب التأكد من أن الملفات About.jsx و home.jsx موجودة في المسار الصحيح وأن اسم الملفات واسم المكوّنات المستدعاة تطابق بين الأماكن التي تم استدعاء المكوّنات منها وأماكن تعريفها.

على سبيل المثال، يمكن تغيير الأمر

import About from './components/About/About.jsx';

إلى

import { About } from './components/About/About.jsx';

لأنه يتم تصدير المكون باستخدام export function في ملف About.jsx.

بعد ذلك، يمكن تجربة تغيير اسماء الملفات والمكونات والتأكد من استدعائها بشكل صحيح لتجنب أي أخطاء إملائية أو تنسيقية.

كيف اضيف الملف

في ملف App.js عليك باستيراد مكون About داخل أقواس معقوفة بالشكل التالي:

import { About } from './About.jsx';

حيث أنك قمت بتصديره في المكون بالشكل التالي:

import React from 'react'

export  function About() {

 
    return (
        <div>About</div>
      );
 }
 

وإذا أردت استخدام الاستيراد بدون أقواس عليك بكتابة التصدير بالشكل التالي:

import React from 'react';

export default function About() {
  return <div>About</div>;
}

في JavaScript، توجد اختلافات بين export و export default في طريقة تصدير الوحدات (modules) من ملف إلى آخر. هنا هي الاختلافات الرئيسية بينهما:

1- export تُستخدم لتصدير متغير أو دالة محددة باستخدام اسمها. عند استيراد الوحدة في مكان آخر، يجب استخدام نفس الاسم المحدد عند التصدير.

// في ملف "module.js"
export function myFunction() {
  // ...
}

// في ملف آخر
import { myFunction } from './module.js';

2- export default تستخدم لتصدير قيمة افتراضية واحدة فقط من الوحدة، وتستطيع استيراد القيمة المصدرة باستخدام أي اسم ترغب في استخدامه.

// في ملف "module.js"
export function myFunction() {
  // ...
}

// في ملف آخر
import { myFunction } from './module.js';

3- تستطيع استخدام export مع العديد من الوحدات في نفس الملف، بينما يمكن استخدام export default مرة واحدة فقط في كل ملف.

4- عند استيراد الوحدة، عليك باستيراد الوحدات المصدرة باستخدام export باستخدام الأقواس المنحنية {} مع تحديد الاسم المحدد، بينما يمكن استيراد الوحدة المصدرة باستخدام export default دون الحاجة إلى أي أقواس.

5- بالإمكان تصدير الوحدات باستخدام export واستيرادها باستخدام import في أي ملف JavaScript، بينما export default يستخدم عادة عند تصدير الوحدة الرئيسية في ملف معين.

بتاريخ 3 دقائق مضت قال Moaz Abu Zant:

كيف اضيف الملف