我是 React 和 JS 的新手,正在尝试为我的 CRUD SpringBoot 应用程序实现一个 React 前端。我正在尝试将 ButtonDropdown 添加到我的一个页面。
这是代码:
通用buttondrop.js
import React, { Component, useState } from 'react';
import { ButtonDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
const Bdrop = (props) => {
const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen);
return (
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>
Button Dropdown
</DropdownToggle>
<DropdownMenu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</DropdownMenu>
</ButtonDropdown>
);
}
应用程序.js
import React, { Component } from 'react';
import './App.css';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import CustomerList from './CustomerList';
import EmployeeList from './EmployeeList';
import CustomerEdit from './CustomerEdit';
import EmployeeEdit from './EmployeeEdit';
import SessionList from './SessionList';
import Bdrop from './buttondrop';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path='/' exact={true} component={Home}/>
<Route path='/customers' exact={true} component={CustomerList}/>
<Route path='/customer/:id' component={CustomerEdit}/>
<Route path='/employees' exact={true} component={EmployeeList}/>
<Route path='/employee/:id' component={EmployeeEdit}/>
<Route path='/sessions' exact={true} component={SessionList}/>
<Route path='/buttondrop' component={() => <Bdrop /> }/>
</Switch>
</Router>
)
}
}
qq_遁去的一_1
相关分类