react tunnelsダウンロード-React react tunnelsソースコードのダウンロード

react tunnels

サードパーティ製コンポーネント

1.1.0

ダウンロード

反応トンネル？

コンポーネントツリー内のどこかに配置されたプレースホルダーの反応コンポーネントをレンダリングします。

インストール

 yarn add react-tunnels

なぜ

Reactアプリには、一部の要素のコンテンツがchildrenコンポーネントによって定義されるLayoutを定義する一般的なユースケースがあります。たとえば、 Layout一度だけ定義し、すべてのページに再利用する必要がありますが、その手順がchildrenコンポーネントに依存するブレッドクラブがあります。この小さなライブラリを使用すると、トンネルを定義して、要素からアプリ内の別の要素、さらにはツリーの上にある要素にレンダリングできます。 Portalのようなものですが、ターゲットはDOM要素の代わりにコンポーネントです。

使用法

idで識別されたTunnelPlaceholderを定義し、アプリ内のどこにでも同じIDを持つTunnelコンポーネントを定義することにより、 render関数に渡されるプロパティを決定します。単一のTunnelのみを定義する場合、その小道具はrender関数に直接渡されます。単一のidに複数のTunnelがある場合、プレースホルダーrender関数は、各Tunnelのpropsを含む配列であるitem引数を受け取ります。いくつかの例を見てみましょう。

簡単な例：子供のトンネル

レンダリング関数のないプレースホルダーを定義して、同じ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のProp 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 Slot Fill：Cameron Westlandによって構築された同様のプロジェクトが、APIがわずかに異なり、ユースケースがもう少し限られています。主な違いは、複数のエントリポイントからプレースホルダーにコンテンツを渡すことができないことです。 React-Tunnelsは、各トンネルによって定義されたプロップで配列をプレースホルダーのレンダリング関数に渡すことにより、これを行います。ただし、単純な場合には、かなり似ています。
プアクトスロット：反応スロット塗りつぶしに似たライブラリですが、ジェイソンミラーによって開発された事前になります。