Мой клиент недавно дал мне задание написать функцию, которая включает создание вкладок, подобных вкладкам Bootstrap. Клиентская часть такого проекта была построена с использованием React, и я изначально думал об использовании библиотеки react-tabs, но позже решил реализовать ее сам, так как это было очень простое требование, и я хотел иметь полный контроль над тем, как это работает. .
Цель этого сообщения в блоге - поделиться и объяснить код, который я создал для создания такой функциональности. Таким образом, вы получаете альтернативу, если в один прекрасный день вам понадобится создать аналогичный компонент, не добавляя еще одну зависимость к вашему проекту.
Суть
Я хотел создать очень гибкий компонент вкладок. Основная цель заключалась в том, чтобы разрешить отображение любого допустимого jsx внутри вкладки. Я хотел, чтобы это выглядело примерно так:
Как видите, вкладка должна отображать любые допустимые jsx. Это дает разработчику возможность передавать пользовательские props для других функций, которые могут потребоваться в будущем.
Компонент <Tabs/>
Компонент <Tabs/> хранит состояние и знает, какая вкладка отображается в данный момент. Он обрабатывает изменения, чтобы показать / скрыть другие вкладки. Наконец, это также дает разработчику возможность указать вкладку по умолчанию для рендеринга, когда она не выбрана.
Примечание. Ссылку на весь код с тестами и демонстрацию можно найти в конце этого сообщения в блоге.
Компонент <Tab/>
Компонент <Tab/> - это компонент без состояния. Его цель - просто отобразить вкладку, подобную Bootstrap, позволить разработчику указать какой-либо собственный стиль и вызвать ее родительский элемент (компонент <Tabs/>) при возникновении события onClick.
Заключение
С очень небольшим количеством кода и большой гибкостью нам удалось реализовать простой компонент React <Tabs/>. Суть с исходным кодом, необходимым для реализации обоих компонентов и их тестов, можно найти здесь, а демо - здесь.
Вы когда-нибудь реализовывали что-то подобное? Вы что-то сделали по-другому? Оставьте комментарий ниже и давайте учиться друг у друга :).
