Как перемещаться со стрелками в многострочном списке в React

#javascript #reactjs

Вопрос:

У меня есть список изображений различной длины, и я хочу отобразить их в две строки, как показано на рисунке ниже.

Я могу сделать это с помощью flex-wrap или аналогичного.

Хитрость в том, что мне нужно интуитивно ориентироваться с помощью стрелок. Перейти слева направо легко, потому что я бы просто поискал следующий элемент в списке и установил его в active положение, слушая, как нажимаются клавиши со стрелками.

Однако там, где я застрял, — это вертикальная навигация. Как бы я справился с этим, если бы захотел нажать стрелку вниз и перейти от блока 3 к блоку 8? (Имейте в виду, что длина этого списка является переменной и не всегда будет четным числом.

Любая помощь будет признательна.

1. Всегда ли полная строка 5 или она гибкая в зависимости от размеров ? и все ли изображения показаны одинаковой ширины, или изображение может занимать две ширины в некотором ряду ?

2. Не могу закодировать пример rn, но мой подход состоял бы в том, чтобы найти следующий элемент с той же координатой x, что и активный в данный момент. Допустим, вы находитесь на 3, нажимаете «ВНИЗ», затем проходите через каждого следующего брата и фокусируете первого, который находится в той же координате X.

3. то же самое с «ВВЕРХ», просто вы повторяете всех предыдущих братьев и сестер. однако это работает только для строгих сеток.

Ответ №1:

Найдите следующий элемент с той же координатой X, что и активный в данный момент.

Допустим, вы находитесь на 3, нажимаете «ВНИЗ», затем перебираете каждого следующего брата и фокусируете первого, который находится в той же координате X, которая в вашем примере равна 8.

Это должно работать до тех пор, пока элементы выровнены в сетке.

1. Это хорошее решение. В конце концов, мне понадобилось всего две строки, поэтому я отобразил половину списка в верхней строке, а затем другую половину в строке под ней. Затем я следил за горизонтальным и вертикальным положением и соответствующим образом корректировался. Ваше решение лучше всего работает для неопределенного количества строк.