reactjs - Material UI Drawer Selection How to route?
问题描述
I am trying to use the Material UI React drawer but getting confused on how to implement the selection so that a change is made to a component. For example, I have a selection called Get Videos that should call up my component that does an AXIOS call to S3 to get the files in the buckets.
How do I make the component switch on my selection? Should I use a route or should I set the state of the component to "active"? Any help would be appreciated..
Some Code
handleClick(event) {
????
}
render() {
return (
<div>
<ListItem button>
<ListItemIcon>
<ScheduleIcon/>
</ListItemIcon>
<ListItemText primary="Scheduler" onClick={this.handleClick.bind(this)}/>
</ListItem>
<ListItem button onClick={this.handleClick()}>
<ListItemIcon>
<ViewListIcon/>
</ListItemIcon>
<ListItemText primary="Watch Saved Recordings"/>
</ListItem>
</div>
);
}
解决方案
假设你知道如何使用 react-router-dom。如果不使用此链接找到一个好的指南。
这是一个使用带有侧边栏的反应路由的示例:
import React, { Component } from 'react';
import { ListItemIcon, ListItemText, Divider, IconButton, MenuList, MenuItem, Drawer } from '@material-ui/core';
import { Link, withRouter } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import routes from '../routes/routes';
export class Sidebar extends Component {
constructor(props) {
super(props);
this.activeRoute = this.activeRoute.bind(this);
}
activeRoute(routeName) {
return this.props.location.pathname.indexOf(routeName) > -1 ? true : false;
}
render() {
const { classes, theme } = this.props;
return (
<div>
<Drawer
variant="permanent"
>
<MenuList>
{routes.map((prop, key) => {
return (
<Link to={prop.path} style={{ textDecoration: 'none' }} key={key}>
<MenuItem selected={this.activeRoute(prop.path)}>
<ListItemIcon>
<prop.icon />
</ListItemIcon>
<ListItemText primary={prop.sidebarName} />
</MenuItem>
</Link>
);
})}
</MenuList>
</Drawer>
</div>
);
}
}
export default withRouter(Sidebar);
您的路由器文件应如下所示:
import { Home, ContentPaste, Notifications, AccountCircle } from '@material-ui/icons';
import HomePage from '../pages/Home/HomePage';
import ProfilePage from '../pages/Profile/ProfilePage';
const Routes = [
{
path: '/dashboard/home',
sidebarName: 'Home',
navbarName: 'Home',
icon: Home,
component: HomePage
},
{
path: '/dashboard/profile',
sidebarName: 'Profile',
navbarName: 'Profile',
icon: AccountCircle,
component: ProfilePage
}
];
export default Routes;
使用 activeRoute 您可以突出显示当前路线
希望对你有帮助
推荐阅读
- javascript - 过滤表行时尝试调整分页
- argoproj - Argo CronWorkflow 是否支持 prometheus 指标?
- c# - C# 当我尝试在我的最终方法中调用变量中的值时,它们被设置为 0。它们在之前被调用时正确显示
- f# - 是否有类似于 F# 的 C# 逐字标识符字符?
- azure-application-insights - 在 API Explorer 中为 Azure Application Insights REST API 获取数据返回 null(状态 200)
- apache-spark - 为 PySpark 设置 vscode
- r - 无法理解 RStudio Jobs 的行为方式
- java - RJDBC SQL 查询:“此驱动程序未配置为集成身份验证”
- docker - 在哪里可以找到 hasura 日志文件
- request - 调出响应中缺少 Content-Type HTTP 标头。沃森