带有 React 的 Bootstrap 导航栏
mur*_*7ay 2 twitter-bootstrap reactjs
我对 React 非常陌生，我正在尝试使用 Bootstrap 来关闭导航菜单。我从 create-react-app 开始，但似乎无法使用 Bootstrap 菜单的任何功能。
应用程序.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'reactstrap';
import { Navbar, NavItem, NavDropdown, MenuItem, Nav } from 'react-bootstrap';
class App extends Component {
render() {
return (
<div>
<nav className="navbar navbar-default">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="https://www.google.com">Product Shoppe</a>
</div>
</nav>
</div>
)
}
}
export default App;
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="navbar">
</div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
当前输出如下所示：
我已经遵循了这个啧啧，但它看起来不像视频中的内容：
https://www.youtube.com/watch?v=oUKJA6B1Xr4&t=969s
有谁知道这是怎么回事？
小智 6
由于您导入了“react-bootstrap”，因此您可以使用它提供的 react 组件。
为了让引导导航栏与基本的 create-react-app 一起工作，我执行了以下操作：
create-react-app stackoverflow
cd stackoverflow
yarn add react-bootstrap
index.html
结尾<head>：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
应用程序.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar, NavItem, NavDropdown, MenuItem, Nav } from 'react-bootstrap';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#home">React-Bootstrap</a>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">
Link
</NavItem>
<NavItem eventKey={2} href="#">
Link
</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.4}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
yarn start
小智 5
以防万一有人偶然发现使用 React-Bootstrap 加载导航栏的问题，请先安装该软件包
npm install react-bootstrap bootstrap
安装软件包后，转到要在其中创建导航栏的 .js 文件组件并将其导入
import { Navbar, NavItem, NavDropdown, MenuItem, Nav, Form, FormControl, Button } from 'react-bootstrap';
这应该可以解决问题 React-Bootstrap 导航栏的示例
import React from 'react';
import { Navbar, NavItem, NavDropdown, MenuItem, Nav, Form, FormControl, Button } from 'react-bootstrap';
const Menu = () =>{
return (
<div className='App tc f3'>
<Navbar bg='light' expand='lg'>
<Navbar.Brand href="#home">Menu</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className='mr-auto'>
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
);
}
export default Menu;
最终结果取决于您的设计以及您安装快子以进一步个性化导航栏的喜好。
| 归档时间： |
|
| 查看次数： |
12119 次 |
| 最近记录： |