如何使用React material-ui Drawer列表渲染不同的组件onClick? [英] How to render different component onClick using React material-ui Drawer list?
问题描述
我正在使用 React material-ui 软件包进行仪表板设计.我有一个应用程序栏和一个带有不同项目列表的抽屉.当我单击Drawer中的项目时，我想在Drawer的" main "标记中呈现相应的组件.
App.js组件是基于类的.我具有用于所有其他路线和功能的功能组件.
import React，{useState} from"react";从'@ material-ui/core/styles'导入{makeStyles，useTheme};从"react-router-dom"导入{链接}从'../contexts/AuthContext'导入{useAuthState}；从'@ material-ui/icons/MoveToInbox'导入InboxIcon；从'@ material-ui/icons/Drafts'导入DraftsIcon；导入{MenuItem，MenuList，ListItemIcon，ListItemText，抽屉，ListItem，列表，分隔线，CssBaseline，纸张，IconButton，版式，AppBar，工具栏，按钮，输入}来自"@ material-ui/core"；const抽屉宽度= 200;const useStyles = makeStyles(theme =>({根: {显示:"flex"，}，appBar:{宽度:`calc(100% - ${drawerWidth}px)`，marginLeft:抽屉宽度，}，menuButton:{marginRight:theme.spacing(2)，fontSize:"16px"，颜色:#fff"，}，隐藏: {显示:无"，}，抽屉: {宽度:抽屉宽度，flexShrink:0，}，抽屉纸:{宽度:抽屉宽度，}，工具栏:theme.mixins.toolbar，内容: {flexGrow:1backgroundColor:theme.palette.background.default，填充:theme.spacing(3)，}，标题: {flexGrow:1fontSize:"18px"，}，链接栏:{}，SideBarFont:{fontSize:"14px"，}，}));导出默认功能仪表板(props){const classes = useStyles();const theme = useTheme();const {setUser} = useAuthState();const [open，setOpen] = React.useState(false);返回 (< div className = {classes.root}>< CssBaseline/>< AppBarclassName = {classes.appBar}位置=固定"><工具栏>< Typography variant ="h6" className = {classes.title} noWrap>仪表盘</Typography>< Button color ="inherit">注销</Button></工具栏></AppBar><抽屉className = {classes.drawer}variant =永久"anchor ="left"类别= {{纸:classes.drawerPaper，}}><div className={classes.toolbar}/><除法器/><列出component ="nav" aria-label =主邮箱文件夹">< ListItem按钮>< ListItemIcon>< InboxIcon/></ListItemIcon>< ListItemText disableTypography className = {classes.SideBarFont} primary ="User"/></ListItem>< ListItem按钮>< ListItemIcon>< DraftsIcon/></ListItemIcon>< ListItemText disableTypography className = {classes.SideBarFont} primary ="Account"/></ListItem>< ListItem按钮>< ListItemIcon>< DraftsIcon/></ListItemIcon>< ListItemText disableTypography className = {classes.SideBarFont} primary ="Customer Support"/></ListItem>< ListItem component = {Link} to ="/inventory"按钮>< ListItemIcon>< DraftsIcon/></ListItemIcon>< ListItemText disableTypography className = {classes.SideBarFont} primary ="Inventory"/></ListItem></列表></抽屉>< main className = {classes.content}>< div className = {classes.toolbar}/>< h1> Hello</h1><版式段落>Lorem ipsum dolor坐在amet，私立教育精英，sed do eiusmod tempor incididunt劳动和多尔纳·马里阿利夸.Rhoncus dolor purus non enim praesent elementum</Typography></main></div>);} 我在各自的jsx文件中具有用户，库存，客户支持，帐户的功能组件.当用户单击抽屉列表"项目时，如何渲染或在"主要"内部?
有关用户界面，请参见下文.我想在渲染Hello的地方渲染.
首先，您需要做一些事情.
- 创建要在
main中呈现的组件 - 将这些组件导入到
Dashboard组件
由于您已经在组件中使用了 useState ，因此需要设置另一个 useState .
在您的 ListItem 上，您可以向组件添加 onClick 并执行 useState 函数以将该状态设置为所述组件./p>
在 main 中，您需要添加某种三元或检查器以确定要显示的组件.
我在这里删除了很多项目，但这是一个简短的示例:
从'/path/to/user/component'导入用户；从'/path/to/account/component'导入帐户；...导出默认功能仪表板(props){const [component，setComponent] = useState('user')...返回 (...< ListItem按钮onClick = {()=>setComponent('account')}>< ListItemIcon>< DraftsIcon/></ListItemIcon>< ListItemText disableTypography className = {classes.SideBarFont} primary ="Account"/></ListItem>...< main className = {classes.content}>< div className = {classes.toolbar}/>{组件==='用户'<用户/>:组件==='帐户'?:<帐户/>...}</main></div>);} 是的，在 main 中有一种更干净的方式来进行组件渲染，但这应该使您对从何处开始有了一个认识
I am working on Dashboard design using React material-ui package. I have an App bar and a Drawer with a List of different items. When I click items in Drawer, I want to render the respective component inside the "main" tag of Drawer.
The App.js component is class-based. And I have functional component for all other routes and features.
import React, { useState } from "react";
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Link } from 'react-router-dom'
import { useAuthState } from '../contexts/AuthContext';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import {MenuItem, MenuList, ListItemIcon, ListItemText
, Drawer, ListItem, List, Divider, CssBaseline
, Paper, IconButton, Typography, AppBar, Toolbar
, Button, Input } from '@material-ui/core';
const drawerWidth = 200;
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
menuButton: {
marginRight: theme.spacing(2),
fontSize: "16px",
color: "#fff",
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3),
},
title: {
flexGrow: 1,
fontSize: "18px",
},
LinkBar: {
},
SideBarFont: {
fontSize: "14px",
},
}));
export default function Dashboard(props) {
const classes = useStyles();
const theme = useTheme();
const { setUser } = useAuthState();
const [open, setOpen] = React.useState(false);
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
className={classes.appBar}
position="fixed"
>
<Toolbar>
<Typography variant="h6" className={classes.title} noWrap>
Dashboard
</Typography>
<Button color="inherit">Logout</Button>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="permanent"
anchor="left"
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.toolbar} />
<Divider />
<List component="nav" aria-label="main mailbox folders">
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText disableTypography className={classes.SideBarFont} primary="User" />
</ListItem>
<ListItem button>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText disableTypography className={classes.SideBarFont} primary="Account" />
</ListItem>
<ListItem button>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText disableTypography className={classes.SideBarFont} primary="Customer Support" />
</ListItem>
<ListItem component={Link} to="/inventory" button>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText disableTypography className={classes.SideBarFont} primary="Inventory" />
</ListItem>
</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<h1>Hello</h1>
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
</Typography>
</main>
</div>
);
}
I have functional components for Users, Inventory, CustomerSupport, Account in their respective jsx files. How can i render or inside "main" when the user click on Drawer List items?
See below for the UI. I want to render where Hello is rendered.
First, you'll need to do a few things.
- Create components to render in the
main - Import those components into the
DashboardComponent
Since you are already using useState in your components, you'll need to set up another useState.
On your ListItem you can add an onClick to the component and do the useState function to set that state to a said component.
In the main you'll need to add some sort of ternary or checker to determine what component to display.
I have removed a number of items here but this is a brief example for you:
import User from '/path/to/user/component';
import Account from '/path/to/account/component';
...
export default function Dashboard(props) {
const [component, setComponent] = useState('user')
...
return (
...
<ListItem button onClick={() => setComponent('account')}>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText disableTypography className={classes.SideBarFont} primary="Account" />
</ListItem >
...
<main className={classes.content}>
<div className={classes.toolbar} />
{
component === 'user' ?
<User />
:
component === 'account' ?
:
<Account />
...
}
</main>
</div>
);
}
Yes there is a cleaner way to do the component rendering in the main but this should give you an idea of where to start
这篇关于如何使用React material-ui Drawer列表渲染不同的组件onClick?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
