问题标签 [react-tabs]

我正在尝试在我的 next/react 应用程序中使用 react-tabs 实现一些选项卡。

我有主页project/:id，始终在 0 索引选项卡中打开，并且在选择每个选项卡时，选项卡名称会添加到路线中，例如：project/:id/one-tab。

这样，如果我共享链接project/:id/two-tab，该站点将在 1 索引选项卡中打开。

但我得到了错误

react-dom.development.js:20312 Uncaught Error: Switching between controlled mode (by usingselectedIndex) and uncontrolled mode is not supported in选项卡. at Function.copyPropsToState (Tabs.js:65) at getDerivedStateFromProps (Tabs.js:50)

我的组件看起来像这样

因此，我在我的网络应用程序中使用react-tabs，该应用程序目前由三个组件组成（每个组件一个选项卡）。我有一个global.css已加载并应用于所有选项卡的文件。我还有三个单独的 CSS 文件，它们应该只应用于每个相应的选项卡。每个选项卡/组件都是一个单独的 JS 文件，并像这样导入相应的样式表：

但是由于我实现了 react-tabs，所有三个样式表都会全局加载，因此都应用于我不想要的每个选项卡。

我为每个标签都试过这个：

但它们仍然会在全球范围内加载。如何确保每个样式表/CSS 文件仅适用于相应的选项卡而没有其他内容，同时保持每个组件具有一个 CSS 文件的结构？

我正在尝试将react-tabs与Formik一起使用，但每次我放置<Formik>标签时，都没有渲染任何内容。这就是我想要做的：

这是没有 Formik 的打印屏幕：

我真的不知道我做错了什么。有人遇到过这个问题吗？我得到的唯一错误来自 react-tabs：

1.chunk.js:252727 警告：失败的道具类型：应该有相同数量的“Tab”和“TabPanel” UncontrolledTabs。收到 2 个“Tab”和 0 个“TabPanel”。

我有一个 repo（React，Webpack4，npm，babel），它可以在我的机器（原始和新克隆）上安装并运行良好，但是当下拉到另一台机器时它会抛出错误npm start（在成功运行npm install.

Module not found: Error: Can't resolve 'react-tabs' in XXX

有问题的依赖项react-tabs安装在node_modules两台机器上。

./src/containers/PAGE.js 中的错误找不到模块：错误：无法解析“/home/Repos/PROJECT/src/containers”中的“react-tabs”@ ./src/containers/PAGE.js 11 :0-58 9095:88-92 9095:120-127 9095:155-158 9099:38-41 9103:34-37 9107:35-38 9111:39-42 9115:37-40 9115:74-77 9115 :182-190 9119:27-35 9123:27-35 9127:27-35 9131:27-35 9135:27-35 9135:64-72 @ ./src/App.js @ ./src/index.js @ multi ./src/index.js "index.html" 的子 html-webpack-plugin：1 个资产入口点未定义 = ./index.html [./node_modules/html-webpack-plugin/lib/loader.js!。 /src/index.html] 574 字节 {0} [内置] [./node_modules/lodash/lodash.js] 528 KiB {0} [内置] [./node_modules/webpack/buildin/global.js] (webpack) /buildin/global.js 472 字节 {0} [内置] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] ℹ ｢wdm｣：编译失败。

• 我想更改动态选项卡上的活动选项卡颜色

  这是我的代码..

成员请求发送请求块搜索

选项卡的结果

我正在尝试使选项卡名称可编辑。例如：

在上图的情况下，我希望“办公室”是可编辑的。

我正在使用以下软件包 https://www.npmjs.com/package/react-contenteditable

https://reactcommunity.org/react-tabs/

代码如下所示：

编辑部分的工作单元我清除了所有字母，然后选项卡折叠，所以我不能再打字了。

我也试过：

我什至尝试为 p 标签和组件设置固定的高度和宽度，但这并没有帮助

基本上它看起来像

如您所见，光标消失了，我不能再打字了。

任何建议都会有所帮助。谢谢

我目前正在学习 React.js，我正在尝试开发一个简单的项目，该项目可能包含一些非常重的正文内容，但我必须将它们保留在一个页面中，因此我选择了选项卡式组件作为可能的解决方案。

所以我打算将选项卡内容放入单独的 HTML 中，然后include将它们隐藏到主页中，直到单击它们的选项卡选项，但这是否意味着只有在单击选项卡选项后 HTML 才会加载到应用程序中?

通常我会认为单独的 HTML 会在加载主页的同时加载，但是使用 React.js，也许功能不同？

有人可以澄清一下吗？非常感谢！

我在使用带有弹出窗口和 React-Tabs 的 MarkerCluster 传单组件时遇到问题。问题是当我尝试在弹出窗口中重置选定的选项卡时，它会导致无限循环这似乎只是在使用 MarkerCluster 组时，否则它对于单个标记工作正常

我的代码如下

自定义标记组件

index.js

因此，当 MarkerClusterGroup 被删除时，此代码可以正常工作，否则会导致错误：超出最大更新深度

任何帮助，将不胜感激。

谢谢你

页面截图以获得清晰的理解我已经创建了用于显示项目的选项卡。此页面包含两个选项卡选项和一个日历。

问题是当我单击日历日期进行选择时，选项卡选项没有被取消选择。

我希望在单击特定组件时取消选择选项卡，即在日历组件上选择日期，但选项卡没有被取消选择。

这是页面的代码：

通常，每当单击选项卡列表中的选项卡时，都会显示选项卡面板中相应索引中的文本。例如，如果您单击“选项 2”，将显示文本“面板 2”。现在，只要单击选择元素中的任何选项，我都希望发生同样的事情。我尝试在选项卡列表中的选择标记中添加所有选项，但是当我这样做时，它会将名称更改为“[object]”，并且每当单击该选项时，选项卡都不会更改。

你能帮我解决这个问题吗谢谢