как я могу динамически изменять индекс панели вкладок

#javascript #reactjs

Вопрос:

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

 lt;Tabs  value={selectedTab}  indicatorColor="primary"  textColor="primary"  onChange={handleChangeTab}  aria-label="disabled tabs example"  selectionFollowsFocus  gt;    {additionalInfoCells?.length amp;amp; lt;Tab label="Additional Information" /gt;}  {nameCells?.length amp;amp; row?.name?.length amp;amp; lt;Tab label="name List" /gt;}  {pulicCells?.length amp;amp; row?.pulic?.length amp;amp; lt;Tab label="pulic" /gt;}  {privateCells?.length amp;amp; row?.private?.length amp;amp; lt;Tab label="private" /gt;}  {sanCells?.length amp;amp; row?.san?.length amp;amp; lt;Tab label="san List" /gt;}  {CoreCells?.length amp;amp; row?.Core?.length amp;amp; lt;Tab label="Core List" /gt;}  lt;/Tabsgt;  lt;/Boxgt;  lt;/Gridgt;  lt;TabPanel value={selectedTab} index={0}gt;  {additionalInfoCells?.length ? (  lt;DownloadsSubTableadd  data={[row]}  title={"Additional Information"}  mainDetailData={additionalInfoCells}  /gt;  lt;/TabPanelgt;  lt;TabPanel value={selectedTab} index={1}gt;  {nameCells?.length amp;amp; row?.name?.length ?  row?.Sanctions?.map((row, i) =gt; {  return (  lt;DetailsCard row={row} mainDetailData={nameCells} /gt;  );  }) : null}  lt;/TabPanelgt;  lt;TabPanel value={selectedTab} index={2}gt;  {pulicCells?.length amp;amp; row?.pulic?.length ? (  lt;DownloadsSubTable  cells={pulicCells}  data={row?.pulic}  /gt;  ) : null}  lt;/TabPanelgt;  lt;TabPanel value={selectedTab} index={3}gt;  {privateCells?.length amp;amp; row?.private?.length ? (  lt;DownloadsSubTable  cells={privateCells}  data={row?.pulic}  /gt;  ) : null}  lt;/TabPanelgt;  lt;TabPanel value={selectedTab} index={4}gt;  {sanCells?.length amp;amp; row?.san?.length ? (  lt;DownloadsSubTable  cells={sanCells}  data={row?.san}  /gt;  ) : null}  lt;/TabPanelgt;  lt;TabPanel value={selectedTab} index={5}gt;  lt;CorprateDownload  userHistorySummary={row?.Core}  cells={CoreCells}  /gt;  lt;/TabPanelgt;