¡ Aquí estoy tratando de transformar un componente funcional en componentes de clase! Quiero lograr que la navegación anidada abra solo una cada vez que haga clic
import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Menu } from 'antd'; import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; // submenu keys of first level const rootSubmenuKeys = ['sub1', 'sub2', 'sub4']; const Sider = () => { const [openKeys, setOpenKeys] = React.useState(['sub1']); const onOpenChange = keys => { const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1); if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) { setOpenKeys(keys); } else { setOpenKeys(latestOpenKey ? [latestOpenKey] : []); } }; return ( <Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 256 }}> <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One"> <Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item> <Menu.Item key="3">Option 3</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item> </SubMenu> <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two"> <Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item> <SubMenu key="sub3" title="Submenu"> <Menu.Item key="7">Option 7</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item> </SubMenu> </SubMenu> <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three"> <Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="12">Option 12</Menu.Item> </SubMenu> </Menu> ); }; ReactDOM.render(<Sider />, document.getElementById('container'));Tenga cuidado con los estados al declararlos en el constructor , y necesita un método de render para que pueda pegar su retorno en él. y cada vez que llame a su función de clase, necesita this y para actualizar su estado, se le solicitará this.setState() .
Puede consultar este código:
import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { Menu } from "antd"; import { AppstoreOutlined, MailOutlined, SettingOutlined } from "@ant-design/icons"; const { SubMenu } = Menu; // submenu keys of first level const rootSubmenuKeys = ["sub1", "sub2", "sub4"]; class Sider extends React.Component { constructor() { super(); this.state = { openKeys: ["sub1"] }; } onOpenChange = (keys) => { const latestOpenKey = keys.find( (key) => this.state.openKeys.indexOf(key) === -1 ); if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) { this.setState({ openKeys: keys }); } else { this.setState({ openKeys: latestOpenKey ? [latestOpenKey] : [] }); } }; render() { const { openKeys } = this.state; return ( <Menu mode="inline" openKeys={openKeys} onOpenChange={this.onOpenChange} style={{ width: 256 }} > <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One"> <Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item> <Menu.Item key="3">Option 3</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item> </SubMenu> <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two"> <Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item> <SubMenu key="sub3" title="Submenu"> <Menu.Item key="7">Option 7</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item> </SubMenu> </SubMenu> <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three"> <Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="12">Option 12</Menu.Item> </SubMenu> </Menu> ); } } ReactDOM.render(<Sider />, document.getElementById("container"));