如何在react.js中单击按钮时切换选项卡菜单

Question

我在react中具有标头的组件，并且在另一个文件中也具有选项卡的组件。我将它们集成到app.js中。现在，我想在单击标题按钮时更改选项卡。谁能在这方面帮助我。

我已经尝试通过给选项卡提供ID来尝试使用它，并尝试通过在选项卡按钮周围使用定位标记调用href中的ID来打开选项卡。但是这种方式无法帮助我打开标签页。 https://codesandbox.io/embed/shy-grass-l9n7m

Answer 1

我注意到您正在使用jQuery设置制表符值。我建议使用React来实现以下目的：https://codesandbox.io/embed/morning-water-dit63

注意：上面的代码非常粗糙，因为我只是通过修改您的代码来一起完成它。例如，我使用活动类和淡入淡出的类名称来设置选项卡内容的可见性，我个人可能会这样进行条件渲染：

render (
  // tabs
  {this.isActive('home') && (
    // tab content here
  )}
)

或者，您可以使用库来像https://reactcommunity.org/react-tabs/

那样处理它