父子通信（class组件中的父子通信）

顺序是先写父组件 再写子组件

父组件：

 1 import React from "react";
 2 import Child from "./Chid";
 3 class Parent extends React.Component{
 4     constructor(){
 5         super();
 6         this.state = {
 7             msg:'下午睡觉了 ',
 8             message:'睡醒了'
 9         }
10     }
11 
12     render(){
13         return(
14             <div>
15                <p>父组件</p>
16                <Child title='自定义的静态数据' msg={this.state.msg} message={this.state.message}></Child>
17             </div>
18         )
19     }
20 }
21 
22 export default Parent;

子组件：

 1 import React from "react";
 2 
 3 class Child extends React.Component{
 4    
 5     render(){
 6         return(
 7             <div>
 8                 {/*  子组件接收父组件的数据：　直接通过　this.props.xxx  */}
 9                 <p>接收父组件传递的数据   ---- {this.props.msg}</p>
10                 <strong>{this.props.message}</strong>
11                 <p>{this.props.title}</p>
12             </div>
13         )
14     }
15 }
16 
17 export default Child;

 

posted @ 2022-08-12 23:07  请善待容嬷嬷  阅读(35)  评论(0)  编辑  收藏  举报