react tunnels 다운로드 - react tunnels 소스 코드 다운로드

react tunnels

타사 구성 요소

1.1.0

다운로드

반응 터널?

구성 요소 트리의 다른 곳에 배치 된 자리 표시 자에서 React 구성 요소를 렌더링하십시오.

설치하다

 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 의 소품 multiple 사용하여 Breadcrumb을 쉽게 만들 수 있습니다. 이를 통해 여러 터널이 있으므로 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 슬롯 : React 슬롯 채우기와 유사한 라이브러리이지만 Jason Miller가 개발 한 PreAct 용.