react tunnels

Реагировать туннели?

Рендеринг компонентов реагирует в заполнителях, которые размещаются где -то еще в дереве компонентов.

Установить

 yarn add react-tunnels

Почему

В приложениях React есть общий вариант использования, где вы хотите определить Layout , где содержание некоторых элементов определяется children компонентами. Например, вы хотите определить Layout только один раз и повторно использовать его для каждой страницы, но у него есть хлебная крошка, чьи шаги зависят от children компонентов. Эта крошечная библиотека позволяет вам определять туннели , чтобы отображать из элемента в любой другой элемент в приложении, даже элементы, расположенные поверх дерева. Это как Portal , но цель представляет собой компонент вместо элемента DOM .

Использование

Определите TunnelPlaceholder , определяемого id и решите, какие свойства будут переданы его функции render , определив компоненты Tunnel с тем же идентификатором в любом месте в приложении. Если вы определите только один Tunnel его реквизит будет передаваться прямо к функции render , если для одного Tunnel будет более одного id , функция render заполнителя получит аргумент item , который является массивом, содержащим props для каждого Tunnel . Посмотрим на некоторые примеры.

Простой пример: Детское туннелирование

Определите заполнителя без какой -либо функции рендеринга, чтобы он стал детьми, поступающим из 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 >
)

Проверьте настоящий пример здесь

Более сложный пример: строительство хлебной крошки

Легко построить хлебную рубку, используя подпорку 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: аналогичный проект, построенный Кэмероном Уэстлендом, с немного другим API и немного более ограниченными вариантами использования. Основное отличие состоит в том, что вы не можете передать контент заполнителю из нескольких точек входа. React-Tunnels делает это, передавая массив с реквизитами, определенными каждым туннелем, до визуализации заполнителя. Для простых случаев это довольно похоже.
• Слоты Preact: библиотека, похожая на заполнение слотов React, но для Preact, разработанного Джейсоном Миллером.

О

Этот проект был разработан Javi Velasco как способ создать компоненты Breadcrumb и Layout макетов для различных проектов React. Любое резерв, помощь или улучшения высоко ценится.

Лицензия

Этот проект лицензирован в соответствии с условиями лицензии MIT.