Блог

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

Однако индексы следует разделить на группы. Например, первая группа индексов может начинаться со смещения 1000, другая группа-с 2000, поэтому индексы вкладок различаются, например:

 lt;p tabindex="1001"gt;...lt;/pgt; lt;p tabindex="1002"gt;...lt;/pgt; lt;p tabindex="1003"gt;...lt;/pgt; lt;p tabindex="1004"gt;...lt;/pgt;  lt;p tabindex="2001"gt;...lt;/pgt; lt;p tabindex="2002"gt;...lt;/pgt; lt;p tabindex="2003"gt;...lt;/pgt; lt;p tabindex="2004"gt;...lt;/pgt;  

То, что я сейчас делаю, это что-то вроде:

 {attachmentsData?.data?.map((attachment, tabIndex) =gt; (  lt;FileName tabIndex={1000   tabIndex} onClick={...}gt;  {attachment.filename}  lt;/FileNamegt;  lt;/divgt;  lt;AttachmentButtonContainergt;  lt;DownloadIcon  tabIndex={2000   tabIndex}...  

Я хочу создать крючок/функцию, чтобы я мог использовать ее таким образом:

 {attachmentsData?.data?.map((attachment, tabIndex) =gt; (  lt;FileName tabIndex={getNext('group1')} onClick={...}gt;  {attachment.filename}  lt;/FileNamegt;  lt;/divgt;  lt;AttachmentButtonContainergt;  lt;DownloadIcon  tabIndex={getNext('group2')}...  

Но не уверен, каков идиоматический способ сделать это. В принципе, идея заключается в том, что getNext следует генерировать индексы независимо от того, сколько раз этот компонент отображается на странице: один раз или сто раз. Таким образом, мы должны сохранить getNext в качестве параметра компонент, верно?

Как именно это может выглядеть, чтобы, как только вы его назовете, счетчик увеличивался? Я попытался создать свой собственный крючок на основе useState , однако у него есть две функции — одна для считывания значения, другая для установки значения. Я хочу объединить вещи — как только вы читаете значение, оно увеличивается, начинается с некоторого смещения. Смещение может быть случайным, 1000 или 10000, не имеет большого значения. Единственное, что должно быть последовательным, чтобы пользователи могли использовать клавиатуру для навигации.

Может быть, вы дадите мне еще какой-нибудь совет о том, как это сделать. Спасибо!