[英]Transforming react functional component to a class component
Here I'm trying to transform a functional component into class components!在这里,我正在尝试将功能组件转换为 class 组件! I want to achieve nested navigation open only one whenever I click
我想实现嵌套导航,每次点击时只打开一个
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'));
Take care of states with declaring it in constructor
, and you need a render
method so you can paste your return on it.通过在
constructor
中声明它来处理状态,并且您需要一个render
方法,以便您可以将您的返回粘贴到它上面。 and whenever you call your class function you need this
and to update your state, you'll be required this.setState()
.每当您致电 class function 时,您都需要
this
并更新您的 state,您将需要this.setState()
。
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"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.