no message

basic/1/P09.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: chenxuan
- * @Date: 2022-01-01 20:04:49
- * @LastEditTime: 2022-01-01 22:41:50
+ * @Date: 2022-01-02 13:37:37
+ * @LastEditTime: 2022-01-02 15:04:53
  * @LastEditors: chenxuan
 -->
 <!DOCTYPE html>
@@ -9,7 +9,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>props限制和默认值</title>
+	<title>函数式组件props</title>
 </head>
 <body>
 	<div id="app"></div>
@@ -18,20 +18,8 @@
     <script src="../package/old/babel.min.js"></script>
 	<script src="../package/old/prop-types.js"></script>
     <script type="text/babel">
-    	class Person extends React.Component{
-			static propTypes = {
-				name:PropTypes.string.isRequired, //限制name必传，且为字符串
-				sex:PropTypes.string,//限制sex为字符串
-				age:PropTypes.number,//限制age为数值
-				speak:PropTypes.func
-			}
-			static defaultProps={
-				name:"xxxx",
-				sex:"xxxx",
-				age:999
-			}
-			render(){
-				const {name,sex,age}=this.props
+    	function Person(props){
+            const {name,sex,age}=props
 				return(
 					<ul>
 						<li>姓名：{name+1}</li>
@@ -39,9 +27,18 @@
 						<li>年龄：{age}</li>
 					</ul>
 				)
-			}
 		}
-		
+		Person.propTypes = {
+            name:PropTypes.string.isRequired, //限制name必传，且为字符串
+            sex:PropTypes.string,//限制sex为字符串
+            age:PropTypes.number,//限制age为数值
+            speak:PropTypes.func
+        }
+        Person.defaultProps={
+            name:"xxxx",
+            sex:"xxxx",
+            age:999
+        }
 		function speak(){
 			console.log('我说话了');
 		}

basic/1/P10.html

@@ -1,48 +0,0 @@
-<!--
- * @Author: chenxuan
- * @Date: 2022-01-02 13:37:37
- * @LastEditTime: 2022-01-02 15:04:53
- * @LastEditors: chenxuan
--->
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>函数式组件props</title>
-</head>
-<body>
-	<div id="app"></div>
-	<script src="../package/old/react.development.js"></script>
-    <script src="../package/old/react-dom.development.js"></script>
-    <script src="../package/old/babel.min.js"></script>
-	<script src="../package/old/prop-types.js"></script>
-    <script type="text/babel">
-    	function Person(props){
-            const {name,sex,age}=props
-				return(
-					<ul>
-						<li>姓名：{name+1}</li>
-						<li>性别：{sex}</li>
-						<li>年龄：{age}</li>
-					</ul>
-				)
-		}
-		Person.propTypes = {
-            name:PropTypes.string.isRequired, //限制name必传，且为字符串
-            sex:PropTypes.string,//限制sex为字符串
-            age:PropTypes.number,//限制age为数值
-            speak:PropTypes.func
-        }
-        Person.defaultProps={
-            name:"xxxx",
-            sex:"xxxx",
-            age:999
-        }
-		function speak(){
-			console.log('我说话了');
-		}
-		ReactDOM.render(<Person name="陈轩" age={18} sex="男" speak={speak}/>,document.getElementById('app'))
-    </script>
-</body>
-</html>