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）开发的预告片。