React学习 第二节 引入antd

第一步：安装antd组件库，执行以下命令(默认安装的是最新版本的antd)

npm install antd

第二步：引入antd的首页布局组件Layout

在antd官网的API中，找到你想使用的Layout样式，复制其代码，在src/App.js中，引入该组件，示例如下：

import { Layout, Menu, Breadcrumb, Icon } from 'antd';  此为引入antd组件的方式，只有这样引入后，才可在return中使用已引入的组件，否则会报该组件未定义的错误

import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import './App.css';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;


class App extends Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

  render() {
    return (
        <div className="App">
          <Layout style={{ minHeight: '100vh' }}>
            <Sider
                collapsible
                collapsed={this.state.collapsed}
                onCollapse={this.onCollapse}
            >
              <div className="logo" />
              <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                <Menu.Item key="1">
                  <Icon type="pie-chart" />
                  <span>Option 1</span>
                </Menu.Item>
                <Menu.Item key="2">
                  <Icon type="desktop" />
                  <span>Option 2</span>
                </Menu.Item>
                <SubMenu
                    key="sub1"
                    title={<span><Icon type="user" /><span>User</span></span>}
                >
                  <Menu.Item key="3">Tom</Menu.Item>
                  <Menu.Item key="4">Bill</Menu.Item>
                  <Menu.Item key="5">Alex</Menu.Item>
                </SubMenu>
                <SubMenu
                    key="sub2"
                    title={<span><Icon type="team" /><span>Team</span></span>}
                >
                  <Menu.Item key="6">Team 1</Menu.Item>
                  <Menu.Item key="8">Team 2</Menu.Item>
                </SubMenu>
                <Menu.Item key="9">
                  <Icon type="file" />
                  <span>File</span>
                </Menu.Item>
              </Menu>
            </Sider>
            <Layout>
              <Header style={{ background: '#fff', padding: 0 }} />
              <Content style={{ margin: '0 16px' }}>
                <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>User</Breadcrumb.Item>
                  <Breadcrumb.Item>Bill</Breadcrumb.Item>
                </Breadcrumb>
                <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                  Bill is a cat.
                </div>
              </Content>
              <Footer style={{ textAlign: 'center' }}>
                Ant Design ©2016 Created by Ant UED
              </Footer>
            </Layout>
          </Layout>
        </div>
    );
  }
}

export default App;

第三步：引入antd的样式文件

经过第二步后，页面确实出来了，但是你会发现跟在官网看到的效果完全不一样，那是因为还有antd的样式文件还未被引入使用

修改src/App.css，在文件的顶部，写入如下代码：

@import '~antd/dist/antd.css';

此时，页面的效果就出来了