Houston Sep 9 2020 at 19:52

React: слоты как у сына маминой подруги

4 min

20K

При композиции компонентов очень часто возникает задача точечной кастомизации содержимого какого-либо компонента. Например, у нас есть компонент DatePicker, и в разных частях веб-приложения нам нужно отображать разные кнопки "Применить".

Для решения подобных задач в каждой популярной технологии сегодня применяется концепция "слотов". У Angular это ngContent, во Vue, Svelte и WebComponents это слоты. И только в популярной библиотеке React полноценной концепции слотов на сегодня нет.

Для решения этой проблемы в React известны несколько подходов:

Компонент может либо отрендерить всех своих детей целиком, либо "залезть" в них через React.Children API и точечно манипуляровать потомками
Компонент может объявлять так называемые renderProps, и отрисовывать возвращаемый из них контент в нужных местах:
```
<MyComponent renderFooter={data => (<h1>Bye, ${data.name}</h1>)}/>
```

Подход с renderProps, в целом, широко известен и не имеет каких-то принципиальных изъянов. Разве что пользоваться им не слишком удобно, в сравнении с полноценными слотами. В NPM есть несколько библиотек, таких как react-view-slot, но мне не кажется, что они достаточно удобно и, главное, просто, решают задачу.

Я решил попытаться исправить этот фатальный недостаток, и сейчас расскажу, как.

Вижу цель – не вижу реализации

Перед тем, как что-то программировать, полезно знать, какое API хочется получить. Вот так выглядел мой набросок желаемого результата:

const Component = props => {
  Component.NameSlot = useSlot(props.children);

  return (
    <div>
      <h1>
        <Component.NameSlot.Receiver>
          Default value
        </Component.NameSlot.Receiver>
      </h1>

      Hello {props.children}
    </div>
  );
};

function App() {
  return (
    <div>
      Hello!
      <Component>
        Foo
        <Component.NameSlot>
          Bobobo
        </Component.NameSlot>
      </Component>
    </div>
  );
}

Идея заключалась в том, чтобы создавать необходимые слоты и сохранять в статическое свойство функции-компонента, а затем использовать соответствующим образом на передающей и принимающей стороне.

Но при попытке реализации сразу стало понятно, что в таком виде это не очень удобно. Статическое свойство компонента – это, фактически, синглтон, и туда не стоит записывать что-то, что отличается от инстанса к инстансу компонента. Поэтому, после нескольких попыток, получилось уже API, применимое на практике:

import {createSlot} from 'react-slotify';

export const MySlot = createSlot();

export const Component = ({children}) => {
  return (
    <div>
      This component contains slot:
      
      <MySlot.Renderer childs={children}>
        This is default slot content
      </MySlot.Renderer>
      
      <div>It also renders children: {children}</div>
    </div>
  );
};

import {Component, MySlot} from './component';

const App = () => {
  return (
    <div>
      <Component>
        <MySlot>Slotted content</MySlot>
        Other content
      </Component>
    </div>
  );
};

Под капотом

Итак, если посмотреть на вышеописанное API, становится понятно, что наша задача – спрятать содержимое компонента MySlot, когда компонент рендерит своих потомков через {children}, но при этом отрисовать его содержимое в то место, в котором расположен MySlot.Renderer. Давайте посмотрим, сколько нужно написать JS-кода, чтобы это заработало:

export function createSlot() {
  const Slot = ({ children, showChildren }) => {
    return showChildren ? children : null;
  }

  const Renderer = ({ childs, children }) => {
    const slotted = React.Children.toArray(childs).find(child => {
      return React.isValidElement(child) && child.type === Slot;
    });

    if (!slotted || !React.isValidElement(slotted)) {
      return children;
    }
    return React.cloneElement(slotted, { showChildren: true });
  };

  Slot.Renderer = Renderer;

  return Slot;
}

Да-да, всего 20 строчек. Но идея, реализованная в этом низкоуровневом React-специфичном коде, не лежит на поверхности. Давайте попробуем разобраться. Основная задача функции – создать и вернуть компонент Slot. Если удалить всё остальное, то получится тривиально:

export function createSlot() {
  const Slot = ({ children, showChildren }) => {
    return showChildren ? children : null;
  }
  return Slot;
}

Всё, что умеет созданный компонент Slot – это прятать своих детей до тех пор, пока в него не будет передан проп showChildren={true}. Когда мы используем слот при использовании компонента, мы это не передаём, и поэтому Slot просто прячет свой контент.

Тут же создаётся ещё один компонент – Renderer. Его задача – принять все дочерние компоненты своего компонента-пользователя, найти среди них нужный нам Slot-компонент, и отрисовать его, склонировав его и передав ему showChildren={true}:

  const Renderer = ({ childs, children }) => {
    const slotted = React.Children.toArray(childs).find(child => {
      return React.isValidElement(child) && child.type === Slot;
    });

    if (!slotted || !React.isValidElement(slotted)) {
      return children;
    }
    return React.cloneElement(slotted, { showChildren: true });
  };

Обратите внимание, что Renderer так же принимает и своих собственных потомков, и рисует их в случае, если Slot не найден. Это обеспечивает отображение дефолтного контента слота.

Ну и последнее – компонент Renderer записывается в статическое свойство только что созданного компонента Slot, чтобы его можно было использовать таким образом: <MySlot.Renderer/>.

Заключение

Таким образом, в 20 строчек кода мы реализовали концепцию, которая очень нравится многим разработчикам в других технологиях, и которой не хватает в React.

Готовую реализацию я опубликовал в виде библиотеки react-slotify на GitHub и в виде пакета в NPM. Уже на TypeScript и с поддержкой параметризации слотов. Буду рад конструктивной критике.

Tags:

Hubs: