'feact引进class解析'

horizon188 · Sep 13, 2020 · 82a1bc8 · 82a1bc8
1 parent afea13d
commit 82a1bc8
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 273 deletions.
diff --git a/.babelrc b/.babelrc
@@ -9,6 +9,7 @@
           "regenerator": true,
           "useESModules": false
         }
-      ]
+      ],
+      ["@babel/plugin-proposal-class-properties", { "loose": true}]
     ]
   }
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/my-first-webpack.bundle.js b/dist/my-first-webpack.bundle.js
diff --git a/index.html b/index.html
@@ -4,9 +4,13 @@
     <title>index</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css"></script>
+    <style>
+        body {
+            background-color: #f5f5f5;
+        }
+    </style>
 </head>
-<body>
+<body style="background-color:#f5f5f5">
     <div id="root"></div>
 </body>
 </html> 
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "webpack-dev-server --config webpack.config.js --open"
+    "dev": "npm run clean && webpack-dev-server --config webpack.config.js --open --color --progress",
+    "clean": "rimraf dist/*"
   },
   "author": "",
   "license": "ISC",
@@ -18,6 +19,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",

diff --git a/src/component/Grid/GridLess.less b/src/component/Grid/GridLess.less
@@ -0,0 +1,3 @@
+.tableComponet {
+  background-color: white;
+}
diff --git a/src/component/Grid/GridView.js b/src/component/Grid/GridView.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import './GridLess.less'
+import { Table, Tag, Space } from 'antd';
+class TableComponent extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+
+    onSelectInfoChange = (selectedRowKeys,selectedRows) => {
+        console.log(selectedRowKeys,selectedRows)
+      };
+    render() {
+        const data = [
+            {
+              key: '1',
+              name: 'John Brown',
+              age: 32,
+              address: 'New York No. 1 Lake Park',
+              tags: ['nice', 'developer'],
+            },
+            {
+              key: '2',
+              name: 'Jim Green',
+              age: 42,
+              address: 'London No. 1 Lake Park',
+              tags: ['loser'],
+            },
+            {
+              key: '3',
+              name: 'Joe Black',
+              age: 32,
+              address: 'Sidney No. 1 Lake Park',
+              tags: ['cool', 'teacher'],
+            },
+          ];
+          const columns = [
+            {
+              title: 'Name',
+              dataIndex: 'name',
+              key: 'name',
+              render: text => <a>{text}</a>,
+            },
+            {
+              title: 'Age',
+              dataIndex: 'age',
+              key: 'age',
+            },
+            {
+              title: 'Address',
+              dataIndex: 'address',
+              key: 'address',
+            },
+            {
+              title: 'Tags',
+              key: 'tags',
+              dataIndex: 'tags',
+              render: tags => (
+                <>
+                  {tags.map(tag => {
+                    let color = tag.length > 5 ? 'geekblue' : 'green';
+                    if (tag === 'loser') {
+                      color = 'volcano';
+                    }
+                    return (
+                      <Tag color={color} key={tag}>
+                        {tag.toUpperCase()}
+                      </Tag>
+                    );
+                  })}
+                </>
+              ),
+            },
+            {
+              title: 'Action',
+              key: 'action',
+              render: (text, record) => (
+                <Space size="middle">
+                  <a>Invite {record.name}</a>
+                  <a>Delete</a>
+                </Space>
+              ),
+            },
+          ];
+
+           // 消息模板列表的勾选
+    const rowSelection = {
+        selectedRowKeys:['1'],
+        onChange: this.onSelectInfoChange,
+      };
+        return (
+            <div className={'tableComponet'}>
+
+               <Table columns={columns} dataSource={data} bordered rowSelection={rowSelection}   />
+            </div>
+        );
+    }
+}
+export default TableComponent
diff --git a/src/component/Query/QueryLess.less b/src/component/Query/QueryLess.less
@@ -0,0 +1,3 @@
+.query {
+
+}
diff --git a/src/component/Query/QueryView.js b/src/component/Query/QueryView.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import './QueryLess.less'
+import {DatePicker} from 'antd'
+class App extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    onClick() {
+        this.props.dispatch({
+            type: 'INCREMENT',
+          })
+        //   this.props.history.push('/about/')
+    }
+
+
+
+    render() {
+        const onChange =(date, dateString) => {
+            console.log(date, dateString);
+          }
+        return (
+            <div className={'query'}>
+
+            </div>
+        );
+    }
+}
+export default connect( state => ({
+    number: state.number
+}))(App);
diff --git a/src/component/index.js b/src/component/index.js
@@ -0,0 +1,8 @@
+import Grid from './Grid/GridView'
+import Query from './Query/QueryView'
+
+
+export {
+	Grid,
+	Query
+}
diff --git a/src/views/App.js b/src/views/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import './App.less'
 import {DatePicker} from 'antd'
+import { Grid } from 'component'
 class App extends React.Component {
 
     constructor(props) {
@@ -18,14 +19,9 @@ class App extends React.Component {
 
 
     render() {
-        const onChange =(date, dateString) => {
-            console.log(date, dateString);
-          }
         return (
             <div className={'app'}>
-                <div>react-router 测试</div>
-                <DatePicker onChange={onChange} />
-                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>点击+11</button></div>
+               <Grid></Grid>
 
             </div>
         );

diff --git a/src/views/App.less b/src/views/App.less
@@ -1,9 +1,3 @@
 .app {
-    background-color: red;
-}
-.sss {
-    text-emphasis: none;
-}
-.ssss{
-    text-align: center;
+
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -73,6 +73,13 @@ module.exports = {
       filename: path.resolve(__dirname, 'dist/index.html')
     })
   ],
+  resolve: {
+    alias: {
+      component: path.join(__dirname, 'src/component'),
+    },
+    modules: [path.join(__dirname, 'src'), 'node_modules'],
+    extensions: [".js", ".jsx", '.less', '.css']
+  },
   devServer: {
     hot: true, // 热替换
     contentBase: path.join(__dirname, 'dist'), // server文件的根目录