问题标签 [reactstrap]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2415 浏览

bootstrap-4 - 无法在 Reactstrap Navbar 组件中使用 Bootstrap 类

我在 Node 应用程序上使用 Bootstrap 4 的 Reactstrap 实现,并尝试使用以下 JSX 呈现导航栏组件:

但是当组件渲染时,它会h-50完全跳过我添加的类 ( ):

Reactstrap文档提供了一个道具列表,可以用于大多数常规道具,例如navbar-inverse,navbar-faded等,但没有用于像我这样的自定义类。有什么建议么?

0 投票
3 回答
4521 浏览

html - 如何在 ReactJS 中对 HTML 表进行排序

我有array并将Objects我的数据添加到HTML Table. 现在我需要按版本对数据进行排序。我怎么能做这样的事情React

也许我可以使用一些js脚本,但告诉我如何使用它,我是ReactJS. 例如,我的版本是0.26.8

0 投票
2 回答
5120 浏览

reactjs - React + Reactstrap + CSS 模块 + Webpack

我一直在寻找如何组合以下内容:ReactJS + ReactStrap 和 CSS-Modules(react-css-modules 和/或 boostrap-css-modules),但是,我似乎无法将三个模块拼凑在一起来实现所需的效果(或在线查找任何帮助)。

这背后的想法是让 ReactStrap 元素可用,即:

但也允许我使用 CSS-Modules 来获得类似于以下内容的最终结果:

其中 mybutton.css 可能类似于:

我也在使用 Webpack,所以我什至不知道从哪里开始将它与 Webpack 一起使用。

编辑 :

我使用它的方式如下:

npm install --save bootstrap@4.0.0-alpha.6

npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom

npm install --save bootstrap-css-modules

这是我的 webpack 配置

谢谢

0 投票
1 回答
1532 浏览

forms - 如何使用 reactstrap 库在 React 中设置发布表单?

我是 React 和 reactstrap 的新手,我想知道如何设置一个表单,使用 Form-tag 在提交时发布到 post-route。我在文档中找不到执行此操作的示例。所以我正在寻找一个等价的:

我想要这样的东西:

我必须在按钮标签中添加它吗?这该怎么做?顺便说一句,我的路线已经设置好了,所以我只需要从这里发布。

0 投票
3 回答
8218 浏览

reactjs - React 组件中的“无法读取未定义的属性‘onClick’”

我在我的项目中使用 Reactstrap 进行 Bootstrap 集成。但是,我还需要使用 Reactstrap 扩展开箱即用onClick的组件的行为。Button为此,我制作了一个自定义NanoButton组件来重构默认组件。这就是我所说的:

NanoButton正如我所说,该组件将我的自定义onClick功能添加到现有Button类中:

如您所见,在最终执行作为道具传递给它NanoButton的函数之前,我需要组件执行一些自定义活动。onClick但是在浏览器中加载时,它无法this.props.onClick();说它无法读取onClick on undefined?我在这里能错过什么?

0 投票
1 回答
1779 浏览

reactjs - Reactstrap NavDropdown 组件未打开

我还是新手,我正在尝试将 react 和 reactstrap 用于工作中的内部项目。我花了几个小时试图让 NavDropdown 组件工作。我已经尝试将示例代码从https://reactstrap.github.io/components/dropdowns/移植到我的项目中,以对其进行测试并构建我自己的导航,并从这个示例https://codepen.io/eddywashere/中获取线索笔/KgjQay?editors=0010

但是,我无法打开下拉菜单。

当我检查元素时,我可以在检查器中看到 NavDropdown 及其子元素。当我单击 DropDown 元素时,我可以看到它的 state.isOpen 切换为 true。但是 - 下拉菜单实际上并没有显示,它仍然关闭。

我没有 console.log 错误,我对自己做错了什么感到非常困惑。很想了解我在这方面的错误,以便我们可以使用图书馆。

这是我尝试在其中使用 NavDropDown 的标头组件:

这是我将标头导入到的 App.js 文件:

这是我的 index.js

我使用 create-react-app 启动项目,这是我的 package.json

0 投票
5 回答
13275 浏览

reactjs - 导入 .jsx 文件时找不到模块

我找不到解决方案。我正在使用 Reactstrap(CSS 框架)、React、Express 和 Webpack。

我成功在 index.jsx 上导入 App.jsx 文件。然后,我尝试使用相同的方式在 App.jsx 上导入 NavbarTemplate.jsx 文件。但是,它显示如下错误:

./client/src/components/App.jsx 中的错误模块未找到:错误:无法解析 '/Users/oprent1/v2/oprent-react/client/src/components' @ ./ 中的 'NavbarTemplate.jsx'客户端/src/components/App.jsx 11:22-51 @ ./client/src/index.jsx

我的配置有什么问题?我在下面提供了几个与此相关的文件:

webpack.config.js

索引.jsx

应用程序.jsx

导航栏模板.jsx

文件夹结构

在此处输入图像描述

0 投票
1 回答
2664 浏览

reactjs - 如何使用 Reactstrap 设置默认折叠的导航栏?

我在节点应用程序上使用 bootstrap4 的 reactstrap impimentation。这是我的第一次,我需要一点帮助。如何让导航栏一直折叠(无论屏幕大小)?这是来自 reactstrap github 页面的示例代码:

0 投票
1 回答
1706 浏览

javascript - JS/React - cannot read property "X" of undefined, unable to access method

bit of a React noob here and I've searched a fair bit for solutions to this issue, however I'm still confused. In short, I have a dropdown menu with a list of numbers, rendered from an array via map. The intent is to be able to change the value of "coloursValue" via setState by clicking on one of the buttons from the dropdown menu. Everything renders correctly, however when I attempt to click one of the buttons I am met w/ the error message "TypeError: Cannot read property 'changeValue' of undefined". I understand this is likely an issue relating to scope and "this" not being properly defined, yet changeValue is bound in the constructor. What am I doing wrong, and how can I rectify this?

Thank you very much in advance.

0 投票
0 回答
1732 浏览

javascript - 使用 ReactJs 在 Table 和 Modal 中显示数据

我是新来的反应。我想使用 Reactjs 和 Reactstrap 制作仪表板,但我遇到了问题。我想在表格中显示我的数据并以模态显示所有数据,但只显示表格中最后一个数据的数据,这是我的代码。

我的数据来自https://randomuser.me/api/?results=50

这是渲染组件