Я использую виртуальный список с виртуальным списком материала UI и окном реакции
Я пытаюсь достичь двух вещей:
1- в новом событии мне нужно добавить анимацию, которая подталкивает в списке и поместите новое событие первым
2 - событие щелчка изменит маршрут по идентификатору события. и теперь с URL-адресом мы можем загрузить страницу (и go для выбранного события)
в моем списке будет около 50-100 событий, которые будут обновляться во время обновления событий, это не статистика c список. лучше использовать простой список, который отображает все элементы вместо виртуального списка? ?
my Component
const EventsContainer: React.FC = () => {
console.log('render events contiNER');
const events = useSelector<AppState, Events[]>(selectAllEvents);
const containerStyle = useStyles();
const [selectedIndex, updateSelectedIndex] = useState({});
const renderItem = (itemProps: ListChildComponentProps) => {
console.log('render ITEM');
const { style, index } = itemProps;
return (
<EventItem
style={style}
data={events[index]}
selected={selectedIndex === index}
onSelect={(event: Event) => updateSelectedIndex(event.id)}
/>
);
};
return (
<Card variant="outlined" className={containerStyle.root}>
<Box className={containerStyle.list}>
<AutoSizer>
{({ height, width }) => (
<FixedSizeList
width={width}
height={height}
itemSize={55}
itemCount={events.length}
>
{renderItem}
</FixedSizeList>
)}
</AutoSizer>
</Box>
</Card>
);
};
В моем хранилище redux у меня есть объекты событий, которые я выбираю с помощью селектора, который превращает его в массив, и у меня есть «currrentEvent», который сохраняет текущий идентификатор события
Щелчок по событиям должен изменить маршрут (без refre sh)
, поэтому теперь я пытаюсь достичь двух вышеперечисленных задач, спасибо