javascript - React 抽屉状态管理
问题描述
我整理了一个页面,左侧是侧边栏,顶部是应用栏和内容区域。它作为一个单一的巨大组件正常工作。我认为,我们都喜欢 React 的想法和灵活性是让页面上的各种元素成为不同的组件。因此,我继续将 Sidebar、Appbar、Content 区域作为自己的组件。显然,现在存在状态问题,因为我想不出一种方法可以将侧边栏的状态从隐藏更改为显示,以便在页面上进行适当的更改。
现在引入问题,React 的状态管理如何看起来仍然是可选的,并且许多人只推荐用于大型项目?如果没有状态管理,我就不能在其中做一个带有侧边栏的简单项目吗?可能有一些方法可以解决这个特定问题,比如在 App.js 等主组件上获得点击,并在用户每次点击按钮时将其发送到每个单独的组件。我的意思是,不可能只是,它不是一个很好的解决方案。
最后,对于想要查看代码的严格编码人员,我在这里使用了 Material UI,Persistent Drawer:https ://material-ui.com/demos/drawers/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
const drawerWidth = 240;
const styles = theme => ({
root: {
display: 'flex',
},
appBar: {
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginLeft: 12,
marginRight: 20,
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
padding: '0 8px',
...theme.mixins.toolbar,
justifyContent: 'flex-end',
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: -drawerWidth,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
},
});
class PersistentDrawerLeft extends React.Component {
state = {
open: false,
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
render() {
const { classes, theme } = this.props;
const { open } = this.state;
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={classNames(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar disableGutters={!open}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</div>
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<main
className={classNames(classes.content, {
[classes.contentShift]: open,
})}
>
<div className={classes.drawerHeader} />
<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 facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in
hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum
velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing.
Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis
viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo.
Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus
at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed
ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus
sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in.
In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique
sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo
viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam
ultrices sagittis orci a.
</Typography>
</main>
</div>
);
}
}
PersistentDrawerLeft.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft);
解决方案
状态将继续像拆分组件之前一样被管理——在所有需要它的后代组件共有的最高级别。该状态以及管理该状态的任何回调将作为道具传递给需要它的子组件。
这是顶级组件的样子:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import MyAppBar from "./MyAppBar";
import MyContent from "./MyContent";
import MyDrawer from "./MyDrawer";
const styles = theme => ({
root: {
display: "flex"
},
drawerHeader: {
display: "flex",
alignItems: "center",
padding: "0 8px",
...theme.mixins.toolbar,
justifyContent: "flex-end"
}
});
class PersistentDrawerLeft extends React.Component {
state = {
open: false
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
render() {
const { classes } = this.props;
const { open } = this.state;
return (
<div className={classes.root}>
<CssBaseline />
<MyAppBar handleDrawerOpen={this.handleDrawerOpen} open={open} />
<MyDrawer
handleDrawerClose={this.handleDrawerClose}
drawerHeaderClass={classes.drawerHeader}
open={open}
/>
<MyContent drawerHeaderClass={classes.drawerHeader} open={open} />
</div>
);
}
}
PersistentDrawerLeft.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired
};
export default withStyles(styles)(PersistentDrawerLeft);
其他组件则相当简单。您可以看到沙盒中的所有部分。
推荐阅读
- r - 为什么调查权重会改变 R SQUARED?
- javascript - 正则表达式单词匹配包含以“ing”结尾的单词但不排除单词anything, something, nothing的文本
- php - PHP 和 Google 的 reCaptcha v2 - 每次都是空响应
- php - 获取符合特定条件的数组的键仅适用于零键
- python-3.x - 仅使用一行代码的 Python 字符串替换(将“H”和“h”替换为“*”)
- javascript - 无法链接到本地目录中的 js 和 css
- javascript - JavaScript 货币转换器
- doctrine-orm - 带有子查询、order by、rand 和 group by 的 Doctrine Query
- reactjs - 在 Semantic UI React 中永远不会获取 Popup 中的输入引用
- dart - AngularDart:使用响应式表单生成器创建表单