"react-tabs" 有没有办法获取活动选项卡的文本（或为选项卡设置 name/indicator 并获取它？）

Question

我正在使用 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>

但我想知道是否可以“命名”一个选项卡，然后在该选项卡处于活动状态时获取该选项卡的名称？我在文档中看不到这样的内容

Answer 1

你可以做到这一点。

通过向某个选项卡添加一个键，当它处于活动状态时 <Tab key={activeTab}>Gen Problem Solving</Tab> 并使用 useState 来标识一个唯一的选项卡，const [activeTab, setActiveTab] = useState("your_default_active_tab") 并将一个侦听器附加到选项卡，所以如果它单击，您将其更改为 setActiveTab("clicked_tab").
只是通过反应选项卡，而不是 onClick，使用可以使用，focusTabOnClick 并相应地传递状态。

"react-tabs" 有没有办法获取活动选项卡的文本（或为选项卡设置 name/indicator 并获取它？）

"react-tabs" is there any way to get the text of the active tab (or set a name/indicator for tabs and get that?)

react-tabs