reactjs - Reactstrap Bootstrap Navbar 在反应应用程序中不起作用
问题描述
我用“create react-app”创建了一个反应应用程序。
我现在正在尝试从 Reactstrap 添加一个导航栏。我从 Reactstrap 复制粘贴(我将其添加为一个反应组件)网站:
import React from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="light" light expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
它不起作用。我在我的反应应用程序中得到了这个:
我之前在使用 Bootstrap、React 和 Navbar 时遇到过类似的问题,但我真的很惊讶它发生在 Reactstrap 中。你知道为什么会这样吗?
解决方案
您还需要引导程序和 react-dom:
npm install --save bootstrap
npm install --save reactstrap react react-dom
import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';
推荐阅读
- postgresql - pg_trgm,相似性和通过他们的答案找到重复的问题
- python - 删除 timedelta 对象中的天数
- dns - 如何指向名称服务器以在 plesk 上托管多个域?
- javascript - 从 HTML 模板、CSS 模板和 HTML 内容页面组装网页
- c# - 从mailbox.getCallbackTokenAsync返回的令牌能否对邮件项执行写操作
- ios - 无法解开 Promise<[CLPlacemark]>
- python - 在python中自动打开电报机器人中的链接(URL)
- angularjs - Spring 应用程序中的 AngularJS 控制器在亚马逊 AWS 上不起作用
- xamarin - 如何从Android模拟器中获取文件
- python - np.matmul 改变了我的矩阵的维度