问题标签 [react-tabs]

我正在使用 react-tab 创建这样的界面

但是，如果我单击选项卡，它将变成这样：

It is the default css style when the tab gets focus.

我已经尝试过这个 css（更少），但它无法覆盖默认样式：

如何覆盖 css 样式？

另外，有什么地方可以让上面的css更简洁吗？一方面，我希望能够组合[role=tab]成[role=tablist]一个选择器。

编辑

选项卡的 html 标记

我有一个Main.js整合其他 React 类的 React 类。这很好用，但我现在想要三个标签；第一个包含上述Main.js内容，但其他包含不同的东西。

使用react-tabs我已经成功地完成了它。此处创建了三个选项卡：

该Main选项卡呈现并显示得很好。但是，如果我单击Second选项卡，然后返回Main，我将收到以下错误：TypeError: Cannot read property 'data' of null.

我知道我在哪里得到错误；即第一次this.state使用来自的数据。

出了什么问题？是因为它试图重新渲染整个Main组件而不是保存状态吗？

编辑：这里有一些关于如何在这个 Main 组件中管理状态的指针。

我们将上面的值实例化为空。

当组件安装时，它是这样填充的：

它将每 60 秒加载一次。

loadData 函数大致如下：

我是新来的反应本地人。我使用了功能组件而不是可以正常工作的类。在这里我不能使用构造函数、状态、生命周期方法等。所以我想创建一个类而不是函数，但没有运气。

功能组件（index.android.js）

MyHomeScreen.js

MyNotificationsScreen.js

使用类：我想使用类如下。如何使它像上面名为 TabNavigation 的功能组件一样工作？

只是试图获得一个反应标签工作的基本示例。样式似乎不见了。下面的示例在代码沙箱中（查看“Hello.js”），但在通过 npm 将包安装到我的项目后，我看到了完全相同的行为。我错过了什么？谢谢！

https://codesandbox.io/s/jzql1q6819

我正在使用TabNavigator和StackNavigator构建一个 React Native 应用程序。

• 我在我的 React Native 应用程序的根级别使用TabNavigator。
• TabNavigator中的每条路由都映射到StackNavigator。
• 每个StackNavigator有n个屏幕。

假设我在设置选项卡上，并且在用户设置 -> 支付选项 -> 信用卡 1中深入了 3 个屏幕。

每次点击“设置”选项卡时，我都想返回一个屏幕。

• 点击 1：信用卡 1 -> 付款方式
• 点击 2：支付选项 -> 用户设置
• 点击 3：用户设置 -> 设置

我怎样才能做到这一点？

我正在构建一个基于 ReactJS 实现选项卡的 reactjs 网站。我需要根据 tabIndex(3 个组) 对一组项目/文章进行分组，并使用 react-tabs 在 ReactJS 中将它们显示为视图。我有一个较早的代码，其中该集合是一个对象，其中添加了 3 个（选项卡）组文章。但是，当我动态添加文章时，这不起作用。所以，我现在使用的是所有文章的单一集合，并且需要根据 tabIndex 进行分组。每个 artcile 都有属性 - id、tabIndex/tabName、title、text。

请借给我帮助。以下是代码片段：

我是 react-Ag-Grid 的新手，我想在反应选项卡中显示和操作多个 Ag-Grid，以便在选项卡中显示网格。

我正在使用 react-tabs-redux。请参阅下面的网址。

https://www.npmjs.com/package/react-tabs-redux

https://www.ag-grid.com/

我在标签中获得了多个 Ag-Grid。但是当我在网格上做一些操作时，它只在最后一个选项卡网格上执行，我想要我正在执行操作的选项卡中的网格数据（如添加、删除、更新行等）它应该只反映当前活动选项卡所在的同一网格的更改。

在 Javascript 中，我们可以在选项卡中显示多个 Ag-grid 并进行操作。通过为每个网格保留单独的 gridOptions，例如 gridOptionsOne ， gridOptionsTwo

但是 React-Ag-Grid 中的 React js 是 Component 中的网格

我在循环中使用 AgGridReact 组件在选项卡中显示网格

在 onGridReady 函数中如何获取选项卡内的每个网格如何为 Ag-Grid 操作获取不同的 gridApi 和 gridColumnApi

提前致谢

我对 React 很陌生，想显示 2 个选项卡，第一个选项卡单击应该显示我拥有的画布，第二个选项卡应该显示下拉列表。我现在在页面中拥有所有三个。

我的页面看起来像这样 - 2 个选项卡、一个下拉菜单和一个画布。

如何在第一个选项卡单击和下拉菜单上绑定画布 div 以在第二个选项卡单击时显示。

编辑代码：

我有用于登录的 SwitchNavigator

在 Switchnavigator 之后它重定向到 Drawernavigator。

在 Drawernavigator 的主组件中，我有 Tabnavigator

现在，在屏幕上的选项卡组件上，我想进入一个应该从 Drawernavigator 出来的屏幕，在那里我可以弹回 Drawernavigator 的 Tabnavigator。如何做到这一点？在 Drawernavigator 的主组件内，我有一个按钮。单击时我想转到一个应该从 Drawernavigator 出来的屏幕，我可以在该屏幕上弹回 Drawernavigator 的 Tabnavigator。

如何做到这一点？

我使用 react-tabs ( https://reactcommunity.org/react-tabs/ ) 创建 4 个选项卡。现在我需要为它们创建这样的路由“ https://example.com/page=01#tab1 ”、“ https://example.com/page=01#tab2 ”。当您单击选项卡名称时，它们会打开带有所选选项卡的页面。

我试图用少数<Link to="#tab1>Tab1</Link>和<Route path='#tab1' render={() => <MyComponent store={store}/>}/>来自 react-router-dom 的 react-tabs 替换，但标签没有切换。