gpt4 book ai didi

reactjs - Reactstrap Bootstrap Navbar在React应用中不起作用

转载 作者:行者123 更新时间:2023-12-03 15:44:53 25 4
gpt4 key购买 nike

我用“创建react-app”创建了一个react应用。

我现在正在尝试从Reactstrap添加导航栏。我从Reactstrap复制粘贴(我将其添加为一个react组件)website:

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>
);
}
}

并且它不起作用。我在我的应用程序中得到了这个:

navbar in react app

之前我在Bootstrap,React和Navbar上也遇到过类似的问题,但我真的很惊讶它在Reactstrap中正在发生。
你知道为什么会这样吗?

最佳答案

您还需要引导,并使用react:

npm install --save bootstrap
npm install --save reactstrap react react-dom
import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';

关于reactjs - Reactstrap Bootstrap Navbar在React应用中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54520376/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com