• 0

كيفية التعامل مع route له مستويات كثيرة في react

مرحبا لدي route بهذه الطريقة 

const ROUTES = [

  {
    path: '/Prospection',
    key: 'Prospection',
    component: RenderRoutes,
    routes: [
      {
        path: '/Prospection/OfferEmploi',
        key: "Offre d'emploi",
        exact: true,
        parent: 'Prospection',
        breadcrumbName: "offre d'emploi",
        component: () => <OfferEmploi />,
      },
      {
        path: '/Prospection/ConsulterOfferEmploi',
        key: "Consulter une offre d'emploi ",
        exact: true,
        parent: 'Prospection',
        breadcrumbName: "consulter une offre d'emploi ",
        component: () => <ConsulterOfferEmploi />,
      },
    ],
  },

  {
    path: '/Configuration',
    key: 'Configuration',
    nosidebar: false,

    component: RenderRoutes,
    routes: [
      {
        path: '/Configuration/Administration',
        key: 'Administration',
        exact: true,
        parent: 'Configuration',
        breadcrumbName: 'Administration',
        component: RenderRoutes,
        routes: [
          {
            path: '/Configuration/Administration/Utilisateurs',
            key: 'Comptes Utilisateurs',
            parent: 'Configuration',
            breadcrumbName: 'Comptes Utilisateurs',
            // exact: true,
            component: () => <Utilisateurs />,
          },
          {
            path: '/Configuration/Administration/Profils',
            key: 'Rôles',
            parent: 'Configuration',
            breadcrumbName: 'Rôles',
            exact: true,
            component: () => <Profiles />,
          },
          {
            path: '/Configuration/Administration/Fonctionnalites',
            key: 'Fonctionnalités',
            parent: 'Configuration',
            breadcrumbName: 'Fonctionnalités',
            exact: true,
            component: () => <Features />,
          },
        ],
      },
      {
        path: '/Configuration/référentiel',
        key: 'Référentiel',
        parent: 'Configuration',
        exact: true,
        breadcrumbName: 'Admin',
        component: RenderRoutes,
        routes: [
          {
            path: '/Configuration/référentiel/Activite',
            key: 'Activités',
            parent: 'Configuration',
            breadcrumbName: 'Activités',
            exact: true,
            component: () => <Activites />,
          },
          {
            path: '/Configuration/référentiel/Caneaux',
            key: 'Canaux de recrutement',
            parent: 'Configuration',
            breadcrumbName: 'Canaux de recrutement',
            exact: true,
            component: () => <Caneaux />,
          },
         

      
        ],
      },
    ],
  },
];

export default ROUTES;

الفكرة الأولى التي أتتني هي الدوران حوله ب map ثم ارجاع routes على حسب المعامل لكن التحقق صعب لأنه عندما اجد ان هناك مستوى داخلي يجب أن أدور ب map مجددا هل يمكنكم مساعدتي ؟

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك إستخدام الريكيرجن و هو مبدأ ايضا يعادل looping  او الدوران لكن بطرقة ممكن اكثر نوعية حيث أن شرط التوقف لا يعتمد على عدد النود او الرؤوس بل يعتمد على مثلا إن لم يتبقى تفرعات, أو أن محتوى  هذه القيمة null اي غير موجوده هنا مثال بسيط عليها و يمكنك أن تستحدم شئ موازي لها و الأفضل استعمال الdebugger لفهم اكثر كيف يكون الأستدعاء فالحالة هنا ان الداية نفسها تستدعي نفسي طالما ان الشرط الدخلي للخروج لم يتحقق كالتالي

// هنا نقوم بخلق دالة 
function countDown(fromNumber) {
  // هنا نقوم بوضع شرط التوقف و يمكن ان يكون اي شيء بحسب الحالة التي تريدها 
  if(fromNumber===0)return ;
  //نفوم هنا بطباعة الرقم 
  console.log(fromNumber);
  // اهم نقطة نقوم بإستدعاء الدالة مرة أخرى على قيمة جديدة و التي هي الرقم -1 فنمرر هنا قيمة جديدة لدالة جديدة 
    countDown(fromNumber-1);
}

countDown(3);

للعلم إن إستعمال الريكيرجن يقوم على إستدعاء الدالة أكثر من مرة و لكن كل دالة تحتوي على قيم لا علاقة لها بالدالة السابقة , يمكنك تخيل الموضوع انك كل مرة ترسم مربع له نفس الخصائص و لكنك تقوم بعمل نسخ منه و تخصيصه اي المدخلات و المخرجات مختلفة لكل مربع 

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن