reactjs - Ant Design 的“折叠的内联菜单”错误

Question

我是 react 和 javascript 世界的新手。我在折叠内联菜单的 Ant Design 代码中遇到了相当大的错误。我尝试了在论坛上找到的几种解决方案，但没有成功。

而且我不太理解“必须使用解构状态分配”错误之一的概念

我把我的代码和显示给我的错误贴给你。

对于错误“在多行 JSX 周围缺少括号”，我已经尝试了 mettres，但出现了另一个错误。

当我点击按钮时没有任何反应

我希望你能帮助我。

先感谢您

import React, { Component } from 'react';
import { Menu, Icon, Button } from 'antd';

const { SubMenu } = Menu;

class RightVerticalMenu extends Component {
  state = {
    collapsed: false,
  };

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    const { collapsed } = this.state;

    return (
      <div className="right-menu" style={{ width: 256 }}>
        <Button
          type="primary"
          onClick={this.toggleCollapsed}
          style={{ marginBottom: 16 }}
        >
          <Icon type={this.toggleCollapsed ? 'menu-unfold' : 'menu-fold'} />
        </Button>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
        >
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="mail" />
                <span>Métérologie</span>
              </span>
            }
          >
            <Menu.Item key="5">Option 5</Menu.Item>
          </SubMenu>

          <SubMenu
            key="sub2"
            title={
              <span>
                <Icon type="appstore" />
                <span>Chat</span>
              </span>
            }
          >
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
          </SubMenu>
        </Menu>
      </div>
    );
  }
}

export default RightVerticalMenu;

控制台错误：

Must Use destructuring state assignment[29, 19]
Missing Parentheses around multilines JSX[55, 15] and [67, 15]

标签： reactjs