【新手入門篇】React+ant design，antd如何使用，如何尋找例子源碼。

 

本篇着重講解如何使用官方的demo，至於React及antd的安裝及配置在本文末尾會給出相應的參考鏈接。

創建一個React項目之后。

create-react-app 

在新建的項目目錄下引入antd組件庫。

yarn add antd  
或者
npm install antd --save

打開測試一下

yarn start
或者
npm start

創建成功以后會出現如下初始頁面。

 

創建自己的頁面

然后打開antd的官方網站：https://ant.design/docs/react/introduce-cn

本文以Layout為例，找到Layout

可以看到有很多的布局方式。我們選取其中一個，點擊<>

 

 可以展開相應布局的代碼。

點擊右上角的復制代碼，復制到我們的頁面中，導入相應的依賴包，然后稍加進行改造。(注意綠色粗體加大的部分的區別)

import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import React, { Component } from "react"; import "antd/dist/antd.css";


const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

class SiderDemo extends Component {
　　render(){ return( <Layout>
    <Header className="header">
      <div className="logo" />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Layout>
      <Sider width={200} style={{ background: '#fff' }}>
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
        >
          <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
            <Menu.Item key="1">option1</Menu.Item>
            <Menu.Item key="2">option2</Menu.Item>
            <Menu.Item key="3">option3</Menu.Item>
            <Menu.Item key="4">option4</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
            <Menu.Item key="5">option5</Menu.Item>
            <Menu.Item key="6">option6</Menu.Item>
            <Menu.Item key="7">option7</Menu.Item>
            <Menu.Item key="8">option8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}>
            <Menu.Item key="9">option9</Menu.Item>
            <Menu.Item key="10">option10</Menu.Item>
            <Menu.Item key="11">option11</Menu.Item>
            <Menu.Item key="12">option12</Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout style={{ padding: '0 24px 24px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
          Content
        </Content>
      </Layout>
    </Layout>
    </Layout> )} } export default SiderDemo;

之后，回到index.js文件中

導入我們的組件，修改加載的組件名。

此時之前的初始頁面會自動刷新。

耶，大功告成。

最后，在官網的最下方還會有一些屬性的介紹，如果有需要修改的屬性可以參考。

 

 

如有不足，請多指教。謝謝。

 

參考鏈接：

antd官網：https://ant.design/docs/react/introduce-cn

基於ant design UI框架的React項目：https://blog.csdn.net/findhappy117/article/details/79377369