page

src/compents/ch/page.css

@@ -0,0 +1,5 @@
+@import '~antd/dist/antd.css';
+.page {
+  width: 100%;
+  height: 100%;
+}

src/compents/ch/page.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { Card } from 'antd';
+import Highlight from 'react-highlight'
+import './page.css'
+class Page extends Component {
+    render() {
+        const { date } = this.props
+        console.log(date,'----dd')
+        return (
+            <div className="page">
+                {
+                    date.date.map((item, index)=>{
+                        return  ( 
+                        <div style={{ background: '#ECECEC', padding: '30px' }} key="index">
+                        <Card ref="card" title={item.page.title} bordered={false} style={{ width: 1080 }}>
+                        <p>1 : npm install dva-cli -g</p>
+                        <p>2 : dva new dva-quickstart</p>
+                        <p>3 : cd dva-quickstart npm start</p>
+                        </Card>
+                        </div>
+                       )
+                    })
+                }
+            </div>
+        )
+    }
+}
+
+export default Page

src/compents/ch/page.min.css

@@ -0,0 +1 @@
+.page{width:100%;height:100%}

src/compents/ch/page.scss

@@ -0,0 +1,4 @@
+.page{
+    width: 100%;
+    height: 100%;
+}

src/compents/java.js

@@ -1,28 +1,46 @@
 import React, { Component } from 'react';
-import { Menu, Icon } from 'antd';
+import { Menu } from 'antd';
 import './java.css'
 import Dva from './pages/dva'
 import Reacter from './pages/react'
 import Js from './pages/js'
+import Page from '../compents/ch/page'
 const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
 class Index extends Component {
   state = {
-    current: '',
+    current: 'dva',
+    alldate : [] , //总数据
+    sleDate : {} // 筛选的数据
   }
 
   handleClick = (e) => {
     this.setState({
       current: e.key,
     });
   }
-
+  Select = () => { // 筛选函数
+     let a = {} 
+     this.state.alldate.forEach(( item, index) => {
+        if(item.name == this.state.current){
+          a = item
+        }
+     });
+     return a
+  }
   render() {
     let Ele =  Dva;
     if (this.state.current === 'react'){
-        Ele = Reacter
+      Ele = Reacter
     }else if(this.state.current === 'js'){
       Ele = Js
+    }else if(this.state.current === 'dva'){
+      Ele = Dva
+    }else{
+      Ele = Page
+      this.Select() // 触发筛选函数
+    }
+    const pagedate= {
+      date : this.Select() //筛选函数赋值
     }
     return (
       <div className="index">
@@ -43,21 +61,27 @@ class Index extends Component {
           JS
         </Menu.Item>
         <SubMenu title={<span className="submenu-title-wrapper">工具</span>}>
-            <Menu.Item key="setting:1">Github</Menu.Item>
-            <Menu.Item key="setting:2">VsCode</Menu.Item>
+            <Menu.Item key="github">Github</Menu.Item>
+            <Menu.Item key="vscode">VsCode</Menu.Item>
         </SubMenu>
-        <Menu.Item key="alipay">
-          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
-        </Menu.Item>
       </Menu>
-      <div className="ele"><Ele/></div>
+      <div className="ele"><Ele { ...pagedate } /></div>
         </section>
         <div className="right-ani"></div>
       </div>
     );
   }
+  getDate(){
+     fetch('https://www.easy-mock.com/mock/5c1b265248952b7bd65143e1/date')
+     .then( res => res.json() )
+     .then( date => {
+       this.setState({
+          alldate : date
+       })
+     } )
+  }
   componentDidMount(){
-
+    this.getDate()
   }
 }
 

src/compents/pages/changdate.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Changdate extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}