react tunnels

رد فعل الأنفاق؟

عرض مكونات React في العناصر النائبة التي يتم وضعها في مكان آخر في شجرة المكون.

ثَبَّتَ

 yarn add react-tunnels

لماذا

هناك حالة استخدام شائعة في تطبيقات React حيث تريد تحديد Layout حيث يتم تعريف محتوى بعض العناصر بواسطة مكونات children . على سبيل المثال ، تريد تحديد Layout مرة واحدة فقط وإعادة استخدامه لكل صفحة ، ولكنه يحتوي على خبز تعتمد خطواته على مكونات children . تتيح لك هذه المكتبة الصغيرة تحديد الأنفاق لتقديمها من عنصر إلى أي عنصر آخر في التطبيق ، حتى العناصر الموجودة فوق الشجرة. إنه مثل Portal ولكن الهدف هو مكون بدلاً من عنصر DOM .

الاستخدام

حدد حامل TunnelPlaceholder الذي تم تحديده بواسطة id وتحديد ما هي الخصائص التي سيتم تمريرها إلى وظيفة render الخاصة بها من خلال تحديد مكونات Tunnel بنفس المعرف في أي مكان آخر في التطبيق. إذا حددت Tunnel واحدًا فقط ، فسيتم تمرير الدعائم الخاصة به مباشرة إلى وظيفة render ، إذا كان هناك أكثر من Tunnel واحد id واحد ، فستتلقى وظيفة render العنصر النائب وسيطة item وهي صفيف يحتوي على props لكل Tunnel . دعونا نرى بعض الأمثلة.

مثال بسيط: نفق الأطفال

حدد عنصرًا نائبًا دون أي وظيفة عرض ، بحيث ستجعل أي أطفال يأتي من مكون Tunnel مع نفس المعرف.

 import { TunnelProvider , TunnelPlaceholder , Tunnel } from 'react-tunnels'

render (
  < TunnelProvider >
    < div >
      < TunnelPlaceholder id = "my-tunnel" />
      < Tunnel id = "my-tunnel" >
        This will be rendered on the placeholder ?
      </ Tunnel >
    </ div >
  </ TunnelProvider >
)

تحقق من المثال الحقيقي هنا

مثال أكثر تعقيدًا: بناء خبز

من السهل بناء خبز باستخدام دعامة multiple في TunnelPlaceholder . يسمح ذلك بإعلامه بأنه سيكون هناك أنفاق متعددة بحيث يتم استدعاء وظيفة render بمجموعة من الدعائم.

 const Breadcrumbs = ( ) => (
  < TunnelPlaceholder id = "breadcrumb" multiple >
    { ( { items } ) => (
      items . map ( ( { children , href } ) => (
        < span > < a href = { href } > { children } </ a > </ span >
      ) )
    ) }
  </ TunnelPlaceholder >
)

const Breadcrumb = ( { children , url } ) => (
  < Tunnel id = "breadcrumb" href = { url } >
    { children }
  </ Tunnel >
)

render (
  < TunnelProvider >
    { /* This will render the breadcrumb */ }
    < Breadcrumbs />
    { /* Somewhere else in children */ }
    < Breadcrumb url = "/products" > Products </ Breadcrumb >
    < Breadcrumb url = "/products/123" > Product < strong > 123 </ strong > </ Breadcrumb >
  </ TunnelProvider >
)

تحقق من مثال مباشر هنا

مكتبات مماثلة

• تعبئة فتحة React: مشروع مماثل صممه كاميرون ويستلاند مع واجهة برمجة تطبيقات مختلفة قليلاً وحالات الاستخدام المحدودة قليلاً. الفرق الرئيسي هو أنه لا يمكنك نقل المحتوى إلى عنصر نائب من نقاط دخول متعددة. يقوم React-Tunnels بذلك عن طريق تمرير صفيف مع الدعائم المحددة بواسطة كل نفق إلى وظيفة تقديم العنصر النائب. بالنسبة للحالات البسيطة ، فهي متشابهة إلى حد ما.
• فتحات Preact: مكتبة مماثلة لملء فتحة React ولكن لـ Preact التي طورها Jason Miller.

عن

تم تطوير هذا المشروع بواسطة Javi Velasco كوسيلة لبناء مكونات الخبز والتخصيصات Layout لمجموعة متنوعة من مشاريع React. أي رسوم أو مساعدة أو تحسينات موضع تقدير كبير.

رخصة

هذا المشروع مرخص بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.