优化代码结构

Author: introvert-y

src/page/Counter/UI/index.js

@@ -1,8 +1,7 @@
 import { connect } from 'react-redux';
-import Counter from './UI/index';
+import React from 'react';
 
-const mapStateToProps = (state, ownProps) => {
-  // console.log('mapStateToProps', state.count,ownProps);
+const mapStateToProps = (state) => {
   return {
     value: state.count
   }
@@ -21,7 +20,14 @@ const mapDispatchToProps = {
   },
 }
 
-// 容器组件
-// const VisibleCounter = connect(mapStateToProps, mapDispatchToProps)(Counter)
+function Page({ value, onIncreaseClick, onDecreaseClick }) {
+  return (
+    <div>
+      <h1>{value}</h1>
+      <button onClick={onIncreaseClick}>+</button>
+      <button onClick={onDecreaseClick}>-</button>
+    </div>
+  )
+}
 
-export default connect(mapStateToProps, mapDispatchToProps)(Counter);
+export default connect(mapStateToProps, mapDispatchToProps)(Page);

src/page/Counter/index.js

@@ -2,65 +2,23 @@ import React from 'react';
 import styled from 'styled-components';
 import style from './index.module.css'
 
-// import logo from './logo.svg';s
-
 const StyledDiv = styled.div`
   width: 300px;
   height: 300px;
   text-align: center;
-  .red_color {
+  .blue_color {
     color: red;
   }
 `;
 
-function FancyBorder(props) {
-  console.log(props);
+function Page() {
   return (
     <StyledDiv>
-      {/* styled-components作用的 */}
-      <h1 className="red_color">test</h1>
-      {/* App.module.css里定义的全局样式 .title 和 局部样式 .red_color */}
-      <h2 className="title">{props.value}</h2>
-      <button className={style.red_color} onClick={props.onClick}>加1</button>
+      <h1 className="blue_color">styled-components的样式</h1>
+      <h2 className={style.pink_color}>App.module.css里定义的样式</h2>
+      <h3 className="title">App.module.css里定义的全局样式</h3>
     </StyledDiv>
   );
 }
 
-class page extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 0,
-    };
-    this.textInput = React.createRef();
-    this.handleClick = this.handleClick.bind(this);
-    this.focusTextInput = this.focusTextInput.bind(this);
-  }
-  componentDidMount() {
-    this.focusTextInput();
-  }
-
-  focusTextInput() {
-    // 直接使用原生 API 使 text 输入框获得焦点
-    // 注意：通过 "current" 取得 DOM 节点
-    this.textInput.current.focus();
-  }
-  handleClick() {
-    this.setState((prevState) => {
-      console.log('当前的count：', prevState.value);
-      return {value: prevState.value + 1}
-    });
-  }
-  render() {
-    return (
-      <div>
-        <FancyBorder value={this.state.value} onClick={this.handleClick}/>
-          <input
-            type="text"
-            ref={this.textInput} />
-      </div>
-    )
-  }
-}
-
-export default page;
+export default Page;

src/page/CssTest/index.js

@@ -1,5 +1,5 @@
-.red_color {
-  color: red;
+.pink_color {
+  color: pink;
 }
 
 :global(.title) {

src/page/CssTest/index.module.css

@@ -0,0 +1,14 @@
+import React from "react";
+import { connect } from 'react-redux';
+
+function mapStateToProps(state) {
+  return {
+    num: state.count,
+  };
+}
+
+function Page({ num }) {
+  return (<h1>{num}</h1>);
+}
+
+export default connect(mapStateToProps)(Page);

src/page/Single/index.js

@@ -1,34 +1,24 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { HashRouter ,BrowserRouter, Route, Link,Switch } from "react-router-dom";
 import Home from '../page/CssTest/index'
 import Counter from '../page/Counter/index'
-import { connect } from 'react-redux';
+import Single from '../page/Single/index'
 
 
-function mapStateToProps(state) {
-  return {
-    num: state.count,
-  };
-}
-function App({num}) {
-  const [count, setCount] = useState(0);
-  console.log('222222', num);
-  useEffect(() => {
-    console.log('111111111' , num);
-  }, [num]);
+
+function App() {
+  // const [count, setCount] = useState(0);
+ 
   return (
     <HashRouter>
       <div>
         <Header />
-        <div>
-          test---
-          {num}
-        </div>
         <div>
             <Route exact path="/" component={Home} />
             <Route path="/about" component={About} />
             <Route path="/hasChildren" component={HasChildren} />
             <Route path="/counter" component={Counter} />
+            <Route path="/single" component={Single} />
         </div>
 
       </div>
@@ -89,8 +79,11 @@ function Header() {
       <li>
         <Link to="/counter">Counter</Link>
       </li>
+      <li>
+        <Link to="/single">single</Link>
+      </li>
     </ul>
   );
 }
 
-export default connect(mapStateToProps)(App);
+export default App;