react tunnels

อิงอุโมงค์?

Render React Components ในตัวยึดตำแหน่งที่วางไว้ที่อื่นในแผนผังส่วนประกอบ

ติดตั้ง

 yarn add react-tunnels

ทำไม

มีกรณีการใช้งานทั่วไปในแอพ React ที่คุณต้องการกำหนด Layout ที่เนื้อหาขององค์ประกอบบางอย่างถูกกำหนดโดยส่วนประกอบ children ตัวอย่างเช่นคุณต้องการกำหนด Layout เพียงครั้งเดียวและนำกลับมาใช้ใหม่สำหรับทุกหน้า แต่มี breadcrumb ซึ่งขั้นตอนขึ้นอยู่กับส่วนประกอบ children ห้องสมุดเล็ก ๆ นี้ช่วยให้คุณสามารถกำหนด อุโมงค์ ให้แสดงผลจากองค์ประกอบไปยังองค์ประกอบอื่นในแอพอื่น ๆ แม้แต่องค์ประกอบที่อยู่ด้านบนของต้นไม้ มันเหมือน Portal แต่เป้าหมายเป็น องค์ประกอบ แทน องค์ประกอบ DOM

การใช้งาน

กำหนด TunnelPlaceholder ที่ระบุโดย id และตัดสินใจว่าคุณสมบัติใดจะถูกส่งผ่านไปยังฟังก์ชั่น render โดยการกำหนดส่วนประกอบ Tunnel ด้วย ID เดียวกัน ทุกที่ในแอพ หากคุณกำหนดเพียง Tunnel เดียวอุปกรณ์ประกอบฉากของมันจะถูกส่งตรงไปยังฟังก์ชั่น render หากมีอุโมงค์มากกว่าหนึ่ง Tunnel สำหรับ id เดียวฟังก์ชั่น render ตำแหน่งจะได้รับอาร์กิวเมนต์ item ซึ่งเป็นอาร์เรย์ที่มี props สำหรับแต่ละ Tunnel มาดูตัวอย่าง

ตัวอย่างง่ายๆ: เด็กอุโมงค์

กำหนดตัวยึดตำแหน่งโดยไม่มีฟังก์ชั่นการแสดงผลใด ๆ ดังนั้นมันจะทำให้เด็ก ๆ ที่มาจากส่วนประกอบ Tunnel ที่มี ID เดียวกัน

 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 >
)

ตรวจสอบตัวอย่างจริงที่นี่

ตัวอย่างที่ซับซ้อนมากขึ้น: การสร้าง breadcrumb

เป็นเรื่องง่ายที่จะสร้าง breadcrumb โดยใช้เสา 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 Slot Fill: โครงการที่คล้ายกันที่สร้างโดย Cameron Westland ด้วย API ที่แตกต่างกันเล็กน้อยและกรณีการใช้งานที่ จำกัด มากขึ้นเล็กน้อย ความแตกต่างที่สำคัญคือคุณไม่สามารถส่งเนื้อหาไปยังตัวยึดตำแหน่งจากหลายจุดเข้า React-Tunnels ทำสิ่งนี้โดยผ่านอาร์เรย์ด้วยอุปกรณ์ประกอบฉากที่กำหนดโดยแต่ละอุโมงค์ไปยังฟังก์ชั่นการแสดงผลของตัวยึดตำแหน่ง สำหรับกรณีง่ายๆแม้ว่ามันจะค่อนข้างคล้ายกัน
• preact slot: ไลบรารีที่คล้ายกับการเติมช่องแบบตอบสนอง แต่สำหรับ preact ที่พัฒนาโดย Jason Miller

เกี่ยวกับ

โครงการนี้ได้รับการพัฒนาโดย Javi Velasco เพื่อสร้างส่วนประกอบ breadcrumb และการ Layout เค้าโครงสำหรับโครงการ React ที่หลากหลาย การคืนค่าความช่วยเหลือหรือการปรับปรุงใด ๆ จะได้รับการชื่นชมอย่างมาก

ใบอนุญาต

โครงการนี้ได้รับใบอนุญาตภายใต้ข้อกำหนดของใบอนุญาต MIT