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

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

風花_10969

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

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： andt react js

本文链接：https://blog.youkuaiyun.com/weixin_40156417/article/details/88172381

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.setState({
            collapsed: !this.state.collapsed,
        });
    }
    handleClick = (e) => {
        console.log('click ', e);
        this.setState({
          current: e.key,
        });
      }
    render(){
        return(
            <Router>
                <Layout>
                    <Menu
                        onClick={this.handleClick}
                        selectedKeys={[this.state.current]}
                        mode="horizontal"
                    >
                        <Menu.Item key="mail">
                            <Link to="/"><span><Icon type="mail" /><span>index</span></span></Link>
                        </Menu.Item>
                        <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />Navigation Three - Submenu</span>}>
                            <MenuItemGroup>
                                <Menu.Item key="setting:1"><Link to="/PageTwo"><span>index</span></Link></Menu.Item>
                                <Menu.Item key="setting:2"><Link to="/PageThree"><span>index</span></Link></Menu.Item>
                            </MenuItemGroup>
                        </SubMenu>
                    </Menu>

                    <Layout>
                        <Header></Header>
                        <Content>
                            <Route exact path="/" component={ PageOne } />
                            <Route path="/PageTwo" component={ PageTwo } />
                            <Route path="/PageThree" component={ PageThree } />
                        </Content>
                        <Footer></Footer>
                    </Layout>
                </Layout>
            </Router>
        )
    }
}


// 配置路由
ReactDOM.render(<DefaultLayout />, document.getElementById('root'));
serviceWorker();