根據上一篇React從入門到架構（3）–引入元件，試試Ant designer內容的講解，我們引入了Ant Design這個非常好用的輪子，那麼我們首先用Ant d來搭建一個基本的圖書管理系統

一、Antd專案出搭建

通過參考Ant d的相關API，我們使用Antd的layout與menu等元件，構建了一個圖書管理系統的基本頁面。
我是antd參考連結

我們一邊上截圖，一邊一步一步說：

（1） 建立目錄：

說明：

• 增加SiderPage.jsx、HeaderPage.jsx和component\ContentPage.jsx
• 採用大駝峰命名

（2）App.js檔案修改：

可拷貝的程式碼為：

import React, { Component } from 'react';
//CSS層疊樣式表引入
import './style/App.css';
import { Layout } from 'antd';
//子元件引入
import HeaderPage from './HeaderPage';
import SiderPage from './SiderPage';
import ContentPage from './component/ContentPage';

class App extends Component
 
 {

  render() {
    return (
      <div className="App">
        <Layout>
          <HeaderPage />
          <Layout>
            <SiderPage />
            <ContentPage />
          </Layout>
        </Layout>
      </div>
    );
  }
}
export default App;
 

（3）以下po出SiderPage.jsx、HeaderPage.jsx和component\ContentPage.jsx的程式碼：

SiderPage.jsx:

import React, { Component } from 'react';
import { Menu, Icon, Layout } from 'antd';

const SubMenu = Menu.SubMenu;
const {Sider} = Layout;

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

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

  render() {
    return (
      <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>
    );
  }
}

HeaderPage.jsx:

import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { Header, Content, Sider } = Layout;

export default class HeaderPage extends Component {
  render() {
    return (
        <Header className="header">
        <div className="logo" />
       <div style={{color:"#fff", fontSize:'36px'}}>Jokerrr的圖書管理系統</div> 
      </Header>
    )
  }
}

component/ContentPage.jsx：

import React, { Component } from 'react'
import { Layout ,Breadcrumb} from 'antd';
const { Content } = Layout;

export default class componentName extends Component {
  render() {
    return (
      <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>
    )
  }
}

(4) 執行效果：

二、解讀React的props和state

有關這一部分，涉及的是React的核心內容，希望大家首先對面向物件有一定的瞭解
實在沒有的話，有問題可以在下方提問。	

我們先不考慮側邊欄的路由問題（會在後面講解），首先關注ContentPage.jsx

（1）什麼是props？

我們會想，既然中間的內容設定為了ContentPage.jsx，那麼我們應該可以對中間的內容再進行細分
假如我有兩個部分，一個叫做SearchPage，表示搜尋框；一個叫做TablePage，表示一個表格區域，那麼：

• 首先來建立這部分的內容，並且使用Antd的Grid柵格實現；
• 然後我們先刪掉沒有用的Breadcrumb部分。
• 然後對SearchPage和TablePage的內容進行新增。

ContentPage.jsx：

import React, { Component } from 'react'
import { Layout, Row, Col } from 'antd';
//匯入自元件
import SearchPage from './SearchPage';
import TablePage from './TablePage';

const { Content } = Layout;

export default class componentName extends Component {
  render() {
    return (
      <Layout style={{ padding: '0 24px 24px' }}>
        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
          <Row>
            <Col span={24}><SearchPage /></Col>
          </Row>
          <Row>
            <Col span={24}><TablePage /></Col>
          </Row>
        </Content>
      </Layout>
    )
  }
}

下面是SearchPage.jsx和TablePage.jsx，在此僅列舉一個：

import React, { Component } from 'react'

export default class SearchPage extends Component {
  render() {
    return (
      <div>
        This is SearchPage , the subPage of ContentPage 
        Created by Joker~!
      </div>
    )
  }
}

介面如下：

Okay，看到這裡，我們會想：
一個網站中肯定有很多個SearchPage，或者很多個TablePage，他們的內容基本相同，我怎麼能提取公共的內容，讓別的元件也可以複用呢？

Okay，既然有公共的內容，那麼肯定也有獨特的內容，我們可以暫時，狹義的把Props，理解成為這些獨特的內容。

之所以叫做“狹義”，因為props並不只因為模板而存在，更多的是一種元件間傳值的方法。

Okay，現在我們假設，SearchPage和TablePage需要顯示的內容，就是像介面表示的那樣，我們可以看到，獨立的內容在這句話“ This is SearchPage , the subPage of ContentPage Created by Joker~!”中只有一個部分，就是檔案的名稱。

我們就拿SearchPage作為這個公共元件，先修改程式碼：
ContentPage.jsx：

render() {
    return (
      <Layout style={{ padding: '0 24px 24px' }}>
        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
          <Row>
            <Col span={24}><SearchPage pageName="搜尋圖書的介面"/></Col>
          </Row>
          <Row>
            <Col span={24}><SearchPage pageName="搜尋使用者的介面" /></Col>
          </Row>
        </Content>
      </Layout>
    )
  }

這段程式碼修改的是什麼意思呢？表示我們對這兩個部分都使用了SearchPage.jsx這個檔案的模板，但是傳入的引數pageName是不相同的。

SearchPage.jsx：

render() {
    return (
      <div>
        This is {this.props.pageName}, the subPage of ContentPage 
        Created by Joker~!
      </div>
    )
  }

所以總結如下：

• （1）props是父元件用於向子元件傳值的一種方式；
• （2）在父元件中使用<FatherPage propsName={propsValue} />的方式進行傳值；
• （3）在子元件中，使this.props.propsName來獲取到propsValue的值；
• （4）這個值可以是json物件，可以是字串，甚至可以是函式。

該部分的程式碼已經放在了GitHub上，地址為React/Demo03，感興趣的朋友可以自己下載，但是不建議直接拷貝，可以自己嘗試一下。
另外，上傳部門沒有Node_modules，需要的話，可以自己用npm命令下載。