feat(pkg.gridvirtualizer): add gridvirtualizer - #88
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| }} | ||
| > | ||
| {rowItems.map((item) => ( | ||
| <div key={item.id}>{renderItem(item)}</div> |
There was a problem hiding this comment.
И тут бы пропсы прокидывать при необходимости
There was a problem hiding this comment.
Что именно в пропсах сюда хочешь прокидывать?
renderItem - это пользовательская функция, которая сама пердается в пропсах, соответственно, все параметры доступны в родителе, где мы рендерем VirtualGrid. Т.е. верстка компонента просиходит в родителе, мы только пердаем item в функцию.
There was a problem hiding this comment.
Не будет ли ни у кого желания в будущем прокинуть какую-либо логику, атрибуты в <div id={item.id}>, получается он родитель у <MaterialsCard>
There was a problem hiding this comment.
Тут div нужен для использования ключа, но я помещу это во Fragment, что еще и уберет лишний узел в DOM.
Управлять родителем, задавать ему стили и атрибуты мы можем внутри JSX-компонента, который вернёт функция renderItem.
There was a problem hiding this comment.
Не помню точно, можно ли key в fragment, тут же ведь получится структура, если будет как на скриншоте:
// Контейнер
<div>
<div key={0}> // это из компонента
<div className="w-full"> // тут уже renderItem, элементы оттуда
<MaterialsCard/>
</div>
</div>
<div key={1}>
<div className="w-full">
<MaterialsCard/>
</div>
</div>
</div>
There was a problem hiding this comment.
Да, можно
https://ru.react.dev/reference/react/Fragment#rendering-a-list-of-fragments
Твоя версия для мобильных экранов или в одну колонку.
2 participants
fix 154 Добавлен инструмент GridVirtualizer для виртуализации больших списков элементов.