问题标签 [reactstrap]

尝试学习 React 和 Reactstrap 并尝试让 Modals 工作。当我单击按钮时，它应该切换模态，但现在它给了我这个错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但是得到：未定义. 检查“App”的渲染方法

无法弄清楚我做错了什么。有人可以帮我知道我要去哪里错了吗？感谢您提供的任何帮助。

如果可能的话，我想使用最新版本的 React 和 Reactstrap。

这是 Codepen 上的链接：https ://codepen.io/lieberscott/pen/ddYNVP

我敢肯定，以前有人问过这个问题，但是我找不到答案。Nav当您单击NavLinkreactstrap 中的 a 或仍在开发中时，如何关闭菜单？

我想创建一个Navbar包含元素的位置在中心。我正在使用 React、Bootstrap 4 和 reactstrap。

我有以下 reactstrap JSX 代码：

问题是导航栏的元素是左对齐而不是居中：

看了这里之后，我认为这会起作用：

但是，它不起作用。

另外，在查看here之后，我尝试将第二行更改为：

但是，这也不起作用。

那么，我如何使元素Navbar居中。

我的反应组件有问题。基本上我的界面应该是一个使用 ReactJS 构建的 SPA。

在使用auth0-js实现身份验证期间，我还实现了一些路由。布局如下所示：

每当我现在单击“食谱”链接时，它应该重定向到路线“/食谱”。但是，当我使用它实现路由时，<Route path="/recipes" component={Recipes} />它只会呈现Recipes 组件中实际返回的内容。我知道从 react 的作用来看这是正确的。现在，我想保留导航栏但只想交换下面的组件，所以我想像在App.js中一样更改导航栏下方的内容。

我怎样才能做到这一点？路线或组件是否不正确？我不想总是重新渲染一切。我也想保持整个页面的风格。有没有办法做到这一点？

整个代码可以在这里找到。

我想要我的 react/redux 应用程序中 reactstrap 的最新提交。我已将它添加到我的 package.json 中，如下所示：

它似乎安装得很好，但是当我使用 npm start 启动我的开发服务器时，我收到以下错误：

以这种方式安装它并正确包含它，我需要做些什么特别的事情吗？

谢谢！

所以基本上我正在使用一个大型数据集，它为您提供今年（2018 年，因此数据是从 2018 年 1 月 1 日到 2018 年 2 月 18 日）每天的视频列表（大约 100-200 个）。我想做的是使用一张表格来显示一天内的所有视频。我正在使用<option>标签作为所有日期的列表。我目前被卡住了，因为我试图让它在您单击某个日期的位置，一个表格将生成并显示当天的视频列表，其中包含视频名称和发布视频的频道。这是我的代码的副本：

下面的代码是生成表格中的每一行：

下面的代码是生成整个表并调用TableRow

最后，这是我做大部分工作的地方。此功能正在生成选项并根据特定日期创建表格。this.props.data是从不同类传递到Options类的数据集

我正在尝试使用this.state.valueVALUE 来获取对象中的 VALUE dateData，因为dateData它包含每个日期的所有视频。但是，我似乎无法找到一种方法来设置this.state.data正确的数据集以传递给Table班级......有人知道如何解决这个问题吗？

数据集外观示例：https ://i.imgur.com/S5JIkbx.png

我有一个现有的项目，并且真的开始进入前端。目前基本上只有占位符，以确保后端和前端正在通话。

我想使用reactstrap，但方向对我来说并不完全清楚，所以正在寻找澄清。我一直在跳过该create-react-app部分，因为我没有使用它。

我只是在 添加引导部分。它说：

npm install --save bootstrap@4.0.0

马上说：

jquery我给人的印象react是相互排斥的，所以我真的需要这样做吗？

npm install --save reactstrap@next react@^16.0.0 react-dom@^16.0.0

这安装得很好。

然后它说：

在 src/index.js 文件中导入 Bootstrap CSS：

import 'bootstrap/dist/css/bootstrap.css';

我想建议只下载 CSS 文件并将其读入入口点。是否reactstrap依赖此配置才能正常工作？

我不能通过 CDN 将 Bootstrap v4 读入index.htmlSPA 吗？reactstrap还能正常工作吗？

一个比另一个更可取吗？

我正在使用 reactstrap 为我的一个视图设置卡片。最后两张卡片在标题中没有图像，需要将它们堆叠起来。我所做的，但看起来不太好是<Col></Col>在其中添加一个，但这会与填充混淆。有没有办法我可以简单地做到这一点并让它看起来正确？Reactstrap 基于 BootStrap 4。

这是我的样子：

我所有 5 张卡的代码是：

我正在使用reactstrap并一直关注此链接：

https://reactstrap.github.io/components/navbar/

在示例中，将 向右<nav className='ml-auto' navbar>推。<NavItem>但是，我要实现的（与示例非常相似）<NavItem>是在<NavbarBrand>.

我已经检查了 100 次语法，它看起来是正确的。我拥有的自定义 CSS 很少，似乎并没有覆盖任何东西。控制台中的 CSS 看起来非常相似，并且似乎受到以下因素的影响：

至少在示例中的控制台中将其关闭，向右移动<NavItem>到<NavbarBrand>它在我的应用程序中的位置（我不想要）。这是我正在查看的内容：

Reactstrap 示例（正确间距）：

我的应用程序的控制台（间距不正确）：

如何在我的应用程序中获得正确的间距？

我真的不清楚是什么影响margin-left: auto !important了在其中一个而不是另一个中工作。

本质上，我有一个<UncontrolledDropdown>扩展时会超出视口，因此无法查看。

我尝试了各种方法让它下拉到左边而不是右边，但它们没有奏效。例如，.mr-auto、.ml-auto、.float-left和.float-right。

这是元素的 HTML 和 SCSS：

有关如何解决此问题的建议？