react项目笔记2----项目的基本配置antd控件的基本使用

添加ui布局主要是antd

###使用antd需要导入

 1. 安装依赖
 npm i antd -S
 2.引入样式
import 'antd/dist/antd.css';
###导入css或者less样式的原发
import './login.less'
###导入组件需要from 后面是组件的路径

引入antd代码

import React,{Component} from 'react';
import { Layout, Menu } from 'antd';
import 'antd/dist/antd.css';
import ReactDOM from 'react-dom';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

export default class SiderDemo extends Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<UserOutlined />}>
              nav 1
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              nav 2
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              nav 3
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}

使用antd空件后一般默认不撑满全屏

一般给index.js 写一个配置文件index.css
并且在index.js中导入
import './index.css'
html,body,#root,.App,.ant-layout{
	height:100%
}

然后为default.jsx 创建css

##引入千峰图片
.logo {
  height: 60px;
  background: url('http://jx.1000phone.net/Public/assets/css/images/logo.png?1591318640') no-repeat center;
}

抽离组件使页面更加的清晰

# 在layout下面创建comments文件夹，然后创建SliderMenu.jsx文件
import React,{Component} from 'react';
import {Menu } from 'antd';
import 'antd/dist/antd.css';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';
export default class SliderMenu extends Component{
    render (){
      return (
      	<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<UserOutlined />}>
              nav 1
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              nav 2
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              nav 3
            </Menu.Item>
          </Menu>
      )
    }
}

抽离后的default.jsx

import React,{Component} from 'react';
import { Layout} from 'antd';
import 'antd/dist/antd.css';
import ReactDOM from 'react-dom';
import './default.css'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import  SliderMenu from './components/SliderMenu'
const { Header, Sider, Content } = Layout;

export default class SiderDemo extends Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
         <SliderMenu/>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}