React: слоты как у сына маминой подруги
При композиции компонентов очень часто возникает задача точечной кастомизации содержимого какого-либо компонента. Например, у нас есть компонент DatePicker, и в разных частях веб-приложения нам нужно отображать разные кнопки «Применить».
Для решения подобных задач в каждой популярной технологии сегодня применяется концепция «слотов». У Angular это ngContent, во Vue, Svelte и WebComponents это слоты. И только в популярной библиотеке React полноценной концепции слотов на сегодня нет.
Для решения этой проблемы в React известны несколько подходов:
Компонент может либо отрендерить всех своих детей целиком, либо «залезть» в них через React.Children API и точечно манипуляровать потомками
Компонент может объявлять так называемые renderProps, и отрисовывать возвращаемый из них контент в нужных местах:
( Bye, ${data.name}
)}/>
Подход с renderProps, в целом, широко известен и не имеет каких-то принципиальных изъянов. Разве что пользоваться им не слишком удобно, в сравнении с полноценными слотами. В NPM есть несколько библиотек, таких как react-view-slot, но мне не кажется, что они достаточно удобно и, главное, просто, решают задачу.
Я решил попытаться исправить этот фатальный недостаток, и сейчас расскажу, как.
Вижу цель — не вижу реализации
Перед тем, как что-то программировать, полезно знать, какое API хочется получить. Вот так выглядел мой набросок желаемого результата:
const Component = props => {
Component.NameSlot = useSlot(props.children);
return (
Default value
Hello {props.children}
);
};
function App() {
return (
Hello!
Foo
Bobobo
);
}Идея заключалась в том, чтобы создавать необходимые слоты и сохранять в статическое свойство функции-компонента, а затем использовать соответствующим образом на передающей и принимающей стороне.
Но при попытке реализации сразу стало понятно, что в таком виде это не очень удобно. Статическое свойство компонента — это, фактически, синглтон, и туда не стоит записывать что-то, что отличается от инстанса к инстансу компонента. Поэтому, после нескольких попыток, получилось уже API, применимое на практике:
import {createSlot} from 'react-slotify';
export const MySlot = createSlot();
export const Component = ({children}) => {
return (
This component contains slot:
This is default slot content
It also renders children: {children}
);
};import {Component, MySlot} from './component';
const App = () => {
return (
Slotted content
Other content
);
};Под капотом
Итак, если посмотреть на вышеописанное 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, чтобы его можно было использовать таким образом:
Заключение
Таким образом, в 20 строчек кода мы реализовали концепцию, которая очень нравится многим разработчикам в других технологиях, и которой не хватает в React.
Готовую реализацию я опубликовал в виде библиотеки react-slotify на GitHub и в виде пакета в NPM. Уже на TypeScript и с поддержкой параметризации слотов. Буду рад конструктивной критике.
