react tunnels下載 - react tunnels源代碼下載

react tunnels

三方組件

1.1.0

下載

反應隧道？

在組件樹中其他位置的佔位符中的渲染反應組件。

安裝

 yarn add react-tunnels

為什麼

React應用程序中有一個常見的用例，您要定義一個Layout ，其中某些元素的內容由children組件定義。例如，您只想僅定義Layout並在每一頁上重複使用它，但是它具有一個麵包屑，其步驟取決於children組件。這個微小的庫允許您定義隧道從元素到應用程序中的其他元素，甚至位於樹頂上的元素。它就像Portal一樣，但目標是組件而不是DOM元素。

用法

定義由id標識的TunnelPlaceholder持有人，並確定將哪些屬性傳遞給其render功能，通過定義應用程序中其他任何地方具有相同ID的Tunnel組件。如果僅定義單個Tunnel其道具將直接傳遞到render功能，如果單個id有一個以上的Tunnel ，則佔位符render函數將接收一個item參數，該項目參數是一個包含每個Tunnel props的數組。讓我們看看一些例子。

簡單的例子：兒童隧道

在沒有任何渲染功能的情況下定義佔位符，以便將任何來自具有相同ID的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 >
)

在此處查看真實示例

更複雜的例子：建造麵包屑

使用TunnelPlaceholder道具multiple建造麵包屑很容易。這允許它知道會有多個隧道，因此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插槽填充：Cameron Westland建造的類似項目的API略有不同，用例略有限制。主要區別在於，您無法將內容從多個入口點傳遞給佔位符。 React-Tunnels通過將每個隧道定義的道具的陣列傳遞給佔位符的渲染功能來做到這一點。但是，對於簡單的情況，它非常相似。
提前插槽：類似於反應插槽填充的庫，但對於傑森·米勒（Jason Miller）開發的預告片。