From 1450c2966f016bf96cad7b2978eca651b832f312 Mon Sep 17 00:00:00 2001
From: chenxuan <chenxuanThinkpad@163.com>
Date: Thu, 18 Apr 2024 16:09:41 +0800
Subject: [PATCH] no message

---
 basic/1/P08.html               |  1 +
 chenxuan1/package-lock.json    |  1 +
 chenxuan1/package.json         |  1 +
 chenxuan1/src/App.js           |  3 ++-
 chenxuan1/src/pages/props.jsx  | 26 ++++++++++++++++++++++++--
 chenxuan1/src/router/index.jsx | 12 +++++++-----
 6 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/basic/1/P08.html b/basic/1/P08.html
index 38f823bf2..75bb3d081 100644
--- a/basic/1/P08.html
+++ b/basic/1/P08.html
@@ -19,6 +19,7 @@
 	<script src="../package/old/prop-types.js"></script>
     <script type="text/babel">
     	class Person extends React.Component{
+			
 			render(){
 				const {name,sex,age}=this.props
 				return(
diff --git a/chenxuan1/package-lock.json b/chenxuan1/package-lock.json
index 2a20424d6..111f7821e 100644
--- a/chenxuan1/package-lock.json
+++ b/chenxuan1/package-lock.json
@@ -43,6 +43,7 @@
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
+        "prop-types": "^15.8.1",
         "pubsub-js": "^1.9.4",
         "react": "^18.2.0",
         "react-app-polyfill": "^3.0.0",
diff --git a/chenxuan1/package.json b/chenxuan1/package.json
index 7c857e1b9..483effd44 100644
--- a/chenxuan1/package.json
+++ b/chenxuan1/package.json
@@ -38,6 +38,7 @@
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.0.1",
     "prompts": "^2.4.2",
+    "prop-types": "^15.8.1",
     "pubsub-js": "^1.9.4",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
diff --git a/chenxuan1/src/App.js b/chenxuan1/src/App.js
index 4853d5e2c..56cc895f3 100644
--- a/chenxuan1/src/App.js
+++ b/chenxuan1/src/App.js
@@ -17,11 +17,12 @@ class App extends Component{
               <NavLink  to='/jsx' activeclassname='active'  children="jsx语法"></NavLink>
               <NavLink  to='/fn' activeclassname='active'  children="函数式组件"></NavLink>
               <NavLink  to='/map' activeclassname='active'  children="map循环"></NavLink>
+              <NavLink to='/props'>props</NavLink>
               <NavLink to='/ref1'>ref-字符串</NavLink>
               <NavLink to='/ref2'>ref-内联函数</NavLink>
               <NavLink to='/ref3'>ref-函数</NavLink>
               <NavLink to='/ref4'>createRef</NavLink>
-              <NavLink to='/props'>props</NavLink>
+              
               <NavLink to='/life'>生命周期函数</NavLink> 
               <NavLink to='/life'>github搜索demo</NavLink> 
               <NavLink to='/life'>Confirm</NavLink>
diff --git a/chenxuan1/src/pages/props.jsx b/chenxuan1/src/pages/props.jsx
index 62e99e678..b205aeaaf 100644
--- a/chenxuan1/src/pages/props.jsx
+++ b/chenxuan1/src/pages/props.jsx
@@ -1,9 +1,31 @@
 import React from 'react';
-class Props extends React.Component {
+import PropTypes from 'prop-types';
+class Child extends React.Component {
+  static propTypes = {
+		name:PropTypes.string.isRequired, //限制name必传，且为字符串
+		sex:PropTypes.string,//限制sex为字符串
+		age:PropTypes.string,//限制age为数值
+	  };
+  static defaultProps = {
+    name: "chenxuan",
+    age: "18",
+    sex: "male"
+  };
   render() {
     return (
       <div>
-        <h1>this is props</h1>
+        <h1>{this.props.name}</h1>
+        <h1>{this.props.age}</h1>
+        <h1>{this.props.sex}</h1>
+      </div>
+    );
+  }
+}class Props extends React.Component {
+  render() {
+    return (
+      <div>
+        <Child/>
+        {/* <Child name="陈轩" age="100" sex="男"/> */}
       </div>
     );
   }
diff --git a/chenxuan1/src/router/index.jsx b/chenxuan1/src/router/index.jsx
index e25aeb2f0..95b144b2f 100644
--- a/chenxuan1/src/router/index.jsx
+++ b/chenxuan1/src/router/index.jsx
@@ -1,12 +1,13 @@
 import Jsx from '../pages/jsx'
 import Fn from '../pages/fn'
 import Map from '../pages/map'
+import Props from "../pages/props"
 import Ref1 from "../pages/ref1"
 import Ref2 from "../pages/ref2"
 import Ref3 from "../pages/ref3"
 import Ref4 from "../pages/ref4"
 import This from "../pages/this"
-import Props from "../pages/props"
+
 import Life from "../pages/life"
 const routes = [
     {
@@ -21,6 +22,10 @@ const routes = [
       path: "/map",
       component: Map
     },
+    {
+      path: "/props",
+      component: Props
+    },
     {
       path: "/life",
       component:Life
@@ -45,10 +50,7 @@ const routes = [
         path: "/this",
         component: This
     },
-    {
-        path: "/props",
-        component: Props
-    },
+   
   ];
 
   export default routes;