pterodaktil
@pterodaktil
js developer

Рендеринг массива с ограничением по длине и подстановкой «+хх more»?

Добрый день. Нужно отрендерить массив элементов таким образом, чтобы в блок (в идеале резиновый, но ограниченный шириной родителя) влезло максимум элементов без переноса/переполнения в ширину. В том случае, если элементы не влазят, обрезать массив и дорисовать "+xx more" (количество тех, которые не влезли). В голову пришло несколько вариантов, самый простой:
//wrapper
display: flex, flex-wrap: wrap, height: XXpx, overflow: hidden;

в useLayoutEffect берем children у враппера (через ref) и фильтруем все, у которых offsetTop !== 0, таким образом получаем максимальное количество тегов в первой строке, а остальные прячутся (overflow + height).
Однако у такого подхода есть ряд очевидных и неочевидных минусов. Возможно, кто-то знает готовые решения или может предложить свой вариант? Спасибо
5f60e200a3a0c238224656.jpeg
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ответы на вопрос 1
@8XL
Мне вот просто интересна критика своей версии, на истинность не претендую:
через реф1 мы получаем ширину контейнера, затем вешаем рефы на каждый элемент массива, получаем их(елементов массива) ширину и индекс в массиве, складываем ширину элементов до ширины контейнера, остальные пeшим в новый массив, который развернется(если я правильно понял функционал) по клику +xxmore. Таким образом лишнего мы не рендерим, а в случае нужды - можем получить.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы