React17 父子组件传值，函数、和类的子组件接收区别

周大胖子

先上主的

1. import './App.css';
   
2. import Hdeder from './page/header/header';
   
3. import React from 'react';
   
4. import Footer from './page/footer/footer';
   
5. 
   
6. // function App() {
   
7. //   return (
   
8. //     <div className="App">
   
9. //         <h1>主页</h1>
   
10. //         <Hdeder name={'王三岁'}  age={'29'} ></Hdeder>
    
11. //     </div>
    
12. //   );
    
13. // }
    
14. // 问题组件渲染两遍
    
15. 
    
16. class App extends React.Component{
    
17. 
    
18.   render(){
    
19.     return (
    
20.       <section>
    
21.         主页
    
22.          {/* <Hdeder name={'王三岁'}  age={'29'} ></Hdeder> */}
    
23.          <Hdeder  name={'王三岁'}  age={29} />
    
24.          <Footer  name={'孔大力'}  age={31}></Footer>
    
25.       </section>
    
26.     )
    
27.   }
    
28. }
    
29. 
    
30. 
    
31. export default App;
    

复制代码

周大胖子

上函数类型接收传参

1. import React from "react";
   
2. // import { ReactPropTypes } from "react";  额 这个哪来的
   
3. import ReactType from "prop-types";
   
4. 
   
5. function Hdeder(props){
   
6.     console.log(props)
   
7.     return (
   
8.         <h1> 我认识 {props.name} 那年， 她 {props.age} 岁 </h1>
   
9.     )
   
10. }
    
11. 
    
12. 
    
13. // 1. 设置传参的默认值
    
14. Hdeder.defaultProps={
    
15.     name:'张三',
    
16.     age:78
    
17. }
    
18. 
    
19. // 2.在子组件中 如何校验参数类型
    
20. // 通过propTypes    需要安装  npm install prop-types
    
21. 
    
22. Hdeder.propTypes={
    
23.     name: ReactType.string ,
    
24.     age:ReactType.number
    
25. }
    
26. 
    
27. export default Hdeder;

复制代码

周大胖子

上类接收传参

1. import React from "react";
   
2. import ReactType from "prop-types";
   
3. 
   
4. class Footer extends React.Component{
   
5.     constructor(props){
   
6.         super();
   
7.         this.props = props;
   
8. 
   
9.     }
   
10. 
    
11.     render(){
    
12.         return (
    
13.             <section>
    
14.                 {this.props.name} 真俊
    
15.             </section>
    
16.         );
    
17.     }
    
18. 
    
19. 
    
20.     // 1、设置默认值
    
21.     static defaultProps ={
    
22.         name:'张三',
    
23.         age:78
    
24.     }
    
25. 
    
26.     // 2.验证传递参数的类型
    
27.     static propTypes = {
    
28.         name: ReactType.string ,
    
29.         age:ReactType.number
    
30.     }
    
31. }
    
32. 
    
33. export default Footer;

复制代码