组件通信

config/createPages.js

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const filePath = process.argv[2];
+const name = process.argv[3];
+
+var styles = {
+  bold: ['\x1B[1m', '\x1B[22m'],
+  italic: ['\x1B[3m', '\x1B[23m'],
+  underline: ['\x1B[4m', '\x1B[24m'],
+  inverse: ['\x1B[7m', '\x1B[27m'],
+  strikethrough: ['\x1B[9m', '\x1B[29m'],
+  white: ['\x1B[37m', '\x1B[39m'],
+  grey: ['\x1B[90m', '\x1B[39m'],
+  black: ['\x1B[30m', '\x1B[39m'],
+  blue: ['\x1B[34m', '\x1B[39m'],
+  cyan: ['\x1B[36m', '\x1B[39m'],
+  green: ['\x1B[32m', '\x1B[39m'],
+  magenta: ['\x1B[35m', '\x1B[39m'],
+  red: ['\x1B[31m', '\x1B[39m'],
+  yellow: ['\x1B[33m', '\x1B[39m'],
+  whiteBG: ['\x1B[47m', '\x1B[49m'],
+  greyBG: ['\x1B[49;5;8m', '\x1B[49m'],
+  blackBG: ['\x1B[40m', '\x1B[49m'],
+  blueBG: ['\x1B[44m', '\x1B[49m'],
+  cyanBG: ['\x1B[46m', '\x1B[49m'],
+  greenBG: ['\x1B[42m', '\x1B[49m'],
+  magentaBG: ['\x1B[45m', '\x1B[49m'],
+  redBG: ['\x1B[41m', '\x1B[49m'],
+  yellowBG: ['\x1B[43m', '\x1B[49m'],
+};
+if (!filePath || !name) {
+  console.error(styles.red[0], `输入错误`);
+  console.error(
+    styles.red[0],
+    `请输入${!filePath ? '路径' : ''}${!name ? '名字' : ''}!`
+  );
+  return;
+}
+
+try {
+  function firstUpperCase(name) {
+    return name.replace(/\b(\w)(\w*)/g, function ($0, $1, $2) {
+      return $1.toUpperCase() + $2.toLowerCase();
+    });
+  }
+  const fileName = firstUpperCase(name);
+  fs.mkdirSync(`./src/pages/${fileName}`);
+  fs.writeFileSync(`./src/pages/${fileName}/index.js`, index());
+  fs.writeFileSync(`./src/pages/${fileName}/${fileName}.tsx`, tmp());
+  fs.writeFileSync(`./src/pages/${fileName}/${fileName}.less`, style());
+
+  function index() {
+    return `import ${fileName} from './${fileName}.tsx';
+import './${fileName}.less';
+
+export default ${fileName}
+`;
+  }
+
+  function tmp() {
+    return `import React from 'react';
+import { Button } from 'antd';
+
+export default class ${fileName} extends React.Component {
+  test() {
+    console.log('${fileName}');
+  }
+  render() {
+    return (
+      <div className="${name}-wrapper">
+        ${fileName}
+        <div>
+          <Button onClick={(e) => this.test()}>goto</Button>
+        </div>
+      </div>
+    );
+  }
+}`;
+  }
+
+  function style() {
+    return `.${name}-wrapper {
+  background-color: blanchedalmond;
+}`;
+  }
+  console.log(styles.green[0], '文件创成功');
+} catch (e) {
+  console.log(styles.red[0], '出现错误', e);
+}

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "page": "node ./config/createPages.js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "serve": "webpack-dev-server --inline --config ./config/webpack.dev.config.js",
     "build": "webpack --config ./config/webpack.prod.config.js",

src/app.tsx

@@ -1,39 +1,41 @@
 import React from 'react';
 
 import { Switch, Route } from 'react-router-dom';
-import Home from './pages/Home/home.tsx';
-// import Other from './pages/other.tsx';
+import Home from './pages/Home/index.js';
+import Other from './pages/Other';
 
 import './app.less';
 import background from './images/background.jpg';
 
 export default class App extends React.Component {
   tpl: Object[];
-  test(): any {
-    const requireComponents = require.context('./pages', true, /\.tsx$/);
-    let tpl: any[] = [];
-    requireComponents.keys().forEach((fileName) => {
-      const reqCom = requireComponents(fileName);
-      console.log(fileName);
+  // test(): any {
+  //   const requireComponents = require.context('./pages', true, /\.tsx$/);
+  //   let tpl: any[] = [];
+  //   requireComponents.keys().forEach((fileName) => {
+  //     const reqCom = requireComponents(fileName);
+  //     console.log(fileName);
 
-      const reqComName = fileName.replace(/^\..*\//, '').replace(/\.tsx$/, '');
-      tpl.push({
-        reqComName,
-        component: reqCom.default || reqCom,
-      });
-    });
-    console.log(23, tpl[0].component);
+  //     const reqComName = fileName.replace(/^\..*\//, '').replace(/\.tsx$/, '');
+  //     tpl.push({
+  //       reqComName,
+  //       component: reqCom.default || reqCom,
+  //     });
+  //   });
+  //   console.log(23, tpl[0].component);
 
-    return tpl;
-  }
+  //   return tpl;
+  // }
   render() {
     return (
       <div>
         <Switch>
           <Route exact path="/" component={Home} />
-          {this.test().map((key): any => (
+          <Route exact path="/home" component={Home} />
+          <Route exact path="/other" component={Other} />
+          {/* {this.test().map((key): any => (
             <Route path={`/${key.reqComName}`} component={key.component} />
-          ))}
+          ))} */}
         </Switch>
       </div>
     );

src/components/layout/Header.tsx

@@ -4,9 +4,19 @@
  * @Last Modified by:   Johnhong9527
  * @Last Modified time: 2020-05-12 17:13:42
  */
-import React from "react";
-export default class Header extends React.Component {
-	render() {
-		return <h1>10010101</h1>;
-	}
+import React from 'react';
+
+type CardProps = {
+  name: String;
+  // paragraph: Object;
+};
+export default class Header extends React.Component<{}, CardProps> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    console.log(this);
+    return <h1>10010101{this.props.name}</h1>;
+  }
 }

src/pages/Home/index.less → src/pages/Home/Home.less

@@ -1,3 +1,3 @@
 .home-wrapper {
   background-color: blanchedalmond;
-}
+}

src/pages/Home/home.tsx

@@ -1,27 +1,18 @@
-/*
- * @Author: Johnhong9527
- * @Date:   2020-05-12 17:08:46
- * @Last Modified by:   Johnhong9527
- * @Last Modified time: 2020-05-12 17:09:00
- */
 import React from 'react';
 import { Button } from 'antd';
-import { Route } from 'react-router-dom';
-import './index.less';
-
+import Header from '@/components/layout/Header.tsx';
 export default class Home extends React.Component {
-  goto() {
-    // console.log(this.props);
-
-    this.props.history.push('/other');
-    console.log(13);
+  test() {
+    console.log('Home');
   }
   render() {
     return (
       <div className="home-wrapper">
+        <Header name={'asas'} />
         Home
+        <div></div>
         <div>
-          <Button onClick={(e) => this.goto()}>goto</Button>
+          <Button onClick={(e) => this.test()}>goto</Button>
         </div>
       </div>
     );

src/pages/Home/index.js

@@ -0,0 +1,4 @@
+import Home from './Home.tsx';
+import './Home.less';
+
+export default Home

src/pages/Other/Other.less

@@ -0,0 +1,3 @@
+.other-wrapper {
+  background-color: blanchedalmond;
+}

src/pages/Other/Other.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button } from 'antd';
+
+export default class Other extends React.Component {
+  test() {
+    console.log('Other');
+  }
+  render() {
+    return (
+      <div className="other-wrapper">
+        Other
+        <div>
+          <Button onClick={(e) => this.test()}>goto</Button>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/Other/index.js

@@ -0,0 +1,4 @@
+import Other from './Other.tsx';
+import './Other.less';
+
+export default Other

src/pages/other.tsx

@@ -1,38 +0,0 @@
-/*
- * @Author: Johnhong9527
- * @Date:   2020-05-12 17:10:44
- * @Last Modified by:   Johnhong9527
- * @Last Modified time: 2020-05-12 17:10:53
- */
-import React from 'react';
-import { Button } from 'antd';
-import { Route } from 'react-router-dom';
-/* 
-const requireComponents = require.context('./pages', true, /\.tsx$/);
-requireComponents.keys().map((fileName) => {
-  const reqCom = requireComponents(fileName);
-  const reqComName = fileName.replace(/^\..*\//, '').replace(/\.tsx$/, '');
-  // 组件挂载
-  // Vue.component(reqComName, reqCom.default || reqCom);
-  console.log(reqCom, reqComName);
-}); */
-export default class Other extends React.Component {
-  goto() {
-    // console.log(this.props);
-    // const getComponent = () => require.context('./pages', true, /\.tsx$/);
-    // this.props.history.push('/');
-    console.log(2131);
-  }
-  tpl() {
-    return <div>1231</div>;
-  }
-  render() {
-    return (
-      <div>
-        Other123123123123
-        <Button onClick={(e) => this.goto()}>goto</Button>
-        <div>{this.tpl()}</div>
-      </div>
-    );
-  }
-}