react项目实战学习笔记-学习23-侧边栏布局

简介: react项目实战学习笔记-学习23-侧边栏布局
import React, { useEffect, useState } from 'react'
import { Menu } from 'antd';
import { ReadOutlined, EditOutlined, DatabaseOutlined } from '@ant-design/icons';
export default function Aside() {
    const [defaultKey, setDefaultKey] = useState('')
    const handleClick = e => {
    };
    return (
        <Menu
            onClick={handleClick}
            style={{ width: 180 }}
            selectedKeys={[defaultKey]}
            mode="inline"
            className='aside'
            theme="dark"
        >
            <Menu.Item key="listlist"><ReadOutlined /> 查看文章列表List</Menu.Item>
            <Menu.Item key="listtable"><ReadOutlined /> 查看文章列表Table</Menu.Item>
            <Menu.Item key="edit"><EditOutlined /> 文章编辑</Menu.Item>
            <Menu.Item key="means"><DatabaseOutlined /> 修改资料</Menu.Item>
        </Menu>
    )
}

image.png

相关文章
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
381 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
缓存 前端开发 JavaScript
学习React的最佳实践有哪些?
学习React的最佳实践有哪些?
448 86
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
354 0
|
前端开发 JavaScript API
如何快速学习React?
如何快速学习React?
465 1
|
移动开发 前端开发 数据可视化
React 拖拽布局组件 Drag & Drop Layout
本文介绍了如何在React中构建拖拽布局组件,涵盖基础知识、常见问题及解决方案。首先解释了拖拽操作的三个阶段:开始、过程中和结束。接着推荐了几个常用的拖拽库,如`react-beautiful-dnd`,并详细展示了如何使用该库创建基础拖拽组件,包括安装依赖、初始化容器和处理拖拽结束事件。文章还探讨了常见问题,如拖拽不生效、性能优化、嵌套拖拽和跨浏览器兼容性,并提供了进阶技巧,如自定义样式、多列布局和集成其他UI组件。通过这些内容,读者可以掌握构建高效拖拽布局的方法。
1142 16
|
缓存 前端开发 UED
React 侧边栏组件 Sidebar
本文介绍了如何使用React创建交互式侧边栏组件,涵盖基础结构、状态管理、样式设计等方面。通过`useState`钩子控制侧边栏的展开与收起,并利用CSS实现动画效果。同时,文章还探讨了响应式设计、性能优化、可访问性和路由集成等常见问题及解决方案,帮助开发者构建高效、美观且易于维护的侧边栏组件,提升Web应用的用户体验。
689 8
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
259 2
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
233 1
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
313 3