no message

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(

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",

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",

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>

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>
     );
   }

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;