如何使用外部元素切换Material-UI Drawer组件状态？

嘿，我来帮你搞定这个问题！其实核心思路就是让外部元素能访问并修改控制Drawer展开/收起的状态，咱们结合官方示例来一步步拆解：

核心逻辑拆解 #

官方示例已经给出了基础框架，它的核心是把Drawer的状态（是否展开）维护在父组件的state里，然后给外部元素绑定一个能修改这个状态的方法：

• 维护Drawer的状态：在组件的state中定义open字段，用来控制Drawer的显示/隐藏
• 编写状态切换方法：实现一个翻转open状态的方法（比如handleToggle），通过setState更新状态
• 绑定到外部元素：给任意Drawer以外的元素（按钮、链接、图标等）的触发事件（比如onClick）绑定这个切换方法
• 关联Drawer组件：把state中的open值传给Drawer的open属性，让Drawer跟着状态变化响应

完整示例代码（类组件版） #

补全官方示例的完整代码：

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import RaisedButton from '@material-ui/core/RaisedButton';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

// 自定义主题（示例用）
const customTheme = createMuiTheme();

export class DrawerSimpleExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  handleToggle = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    return (
      <MuiThemeProvider theme={customTheme}>
        <div>
          {/* 这就是Drawer以外的切换元素：一个按钮 */}
          <RaisedButton label="Toggle Drawer" onClick={this.handleToggle} />
          
          {/* Drawer组件，通过state.open控制状态 */}
          <Drawer open={this.state.open} onClose={this.handleToggle}>
            <div
              tabIndex={0}
              role="button"
              onClick={this.handleToggle}
              onKeyDown={this.handleToggle}
            >
              <List>
                {['首页', '我的收藏', '设置'].map((text, index) => (
                  <ListItem button key={text}>
                    <ListItemText primary={text} />
                  </ListItem>
                ))}
              </List>
            </div>
          </Drawer>
        </div>
      </MuiThemeProvider>
    );
  }
}

扩展：函数组件（Hooks）写法 #

如果现在用React Hooks，实现起来更简洁：

import React, { useState } from 'react';
import { ThemeProvider, createTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

const customTheme = createTheme();

export default function DrawerHookExample() {
  // 用useState维护Drawer状态
  const [open, setOpen] = useState(false);

  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <ThemeProvider theme={customTheme}>
      <div>
        {/* 多个外部元素也可以绑定同一个方法 */}
        <Button variant="contained" onClick={handleToggle}>
          打开抽屉
        </Button>
        <Button style={{ marginLeft: 10 }} variant="outlined" onClick={handleToggle}>
          关闭抽屉
        </Button>

        <Drawer open={open} onClose={handleToggle}>
          <div onClick={handleToggle} onKeyDown={handleToggle}>
            <List>
              {['首页', '我的收藏', '设置'].map((text) => (
                <ListItem button key={text}>
                  <ListItemText primary={text} />
                </ListItem>
              ))}
            </List>
          </div>
        </Drawer>
      </div>
    </ThemeProvider>
  );
}

额外小技巧 #

• 不止按钮，你可以给任何元素绑定handleToggle，比如导航栏的图标、页面底部的链接，甚至可以在滚动事件、定时器里调用这个方法来自动切换Drawer状态
• 如果是跨组件控制，可以通过状态提升、Context或者Redux来共享这个open状态和切换方法

内容的提问来源于stack exchange，提问作者cclloyd