Я использую пакет react-tab.
Я определил свою страницу как
<Tabs>
<TabList>
<Tab>Gen Problem Solving</Tab> {/* (problem_s) */}
<Tab>Spec Balances Problem</Tab> {/* (spec_strat_balan_s) */}
<Tab>Gen Moments</Tab> {/* (mom_s) */}
<Tab>Spec Moments</Tab> {/* (spec_mom_s) */}
<Tab>Gen Gravity</Tab> {/* (gravity_s) */}
<Tab>Spec Gravity</Tab> {/* (spec_gravity_s) */}
</TabList>
<TabPanel>
<p>
problem_s - remove this
</p>
</TabPanel>
<TabPanel>
<p>
spec_strat_balan_s
</p>
</TabPanel>
<TabPanel>
<p>
mom_s
</p>
</TabPanel>
<TabPanel>
<p>
spec_mom_s
</p>
</TabPanel>
<TabPanel>
<p>
gravity_s
</p>
</TabPanel>
<TabPanel>
<p>
spec_gravity_s
</p>
</TabPanel>
</Tabs>
но интересно, можно ли «назвать» вкладку, а затем получить имя этой вкладки, когда она активна? я не вижу ничего подобного в документах
Ты можешь сделать это.
Добавляя ключ к определенной вкладке и когда он активен <Tab key={activeTab}>Gen Problem Solving</Tab>
, и используя useState для определения уникальной вкладки, const [activeTab, setActiveTab] = useState("your_default_active_tab")
и прикрепляя прослушиватель к вкладкам, поэтому, если он нажат, вы меняете его на setActiveTab("clicked_tab")
.
Просто просматривал вкладки реакции, вместо onClick использовал can use, focusTabOnClick
и соответственно передал состояние.
Это не сработало на 100%, но дало мне достаточно толчка, чтобы найти решение моей проблемы. Отметить как отвеченный