React－2、Ant Design Menu与layout公共布局

最新推荐文章于 2024-08-21 04:32:20 发布

風花_10969

最新推荐文章于 2024-08-21 04:32:20 发布

阅读量2.1k

点赞数

文章标签： andt react js

本文链接：https://blog.csdn.net/weixin_40156417/article/details/88172381

版权

本文介绍了如何在React项目中利用Ant Design库创建一个包含Header、Footer和Navigation的通用布局。重点在于`index.js`文件中的配置和组件组合。

摘要由CSDN通过智能技术生成

index.js中设置公共布局的header、footer和导航

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

//引入antd导航组件
import { Menu, Icon, Layout } from 'antd';

//引入ant-design样式
import 'antd/dist/antd.css';

//引入路由
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

//引入样式
import './index.css';

//引入组件
import PageOne from './pages/PageOne/PageOne';
import PageTwo from './pages/PageTwo/PageTwo';
import PageThree from './pages/PageThree/PageThree';

import * as serviceWorker from './serviceWorker';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
//layout布局元素
const { Header, Footer, Content } = Layout;

class DefaultLayout extends Component{
    constructor(props){
        super(props)
        this.state={
            collapsed: true,
        }
    }
    toggleCollapsed = () => {
        this.s