React中父子组件传值

一.首先我们先来看父组件向子组件传值

1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的

我们来看父组件的代码

 import React from 'react';
 import Son1 from './Son1';
 class Father extends React.Component{
     constructor(){
         super();
 
     }
     render(){
         return(
             <React.Fragment>
                 {/* 我们在这里引入子组件 并声明一个属性str  给他传一个hello */}
                 <Son1 str='hello'></Son1>
             </React.Fragment>
         )
     }
 
 }
 export default Father;

接着看子组件

 import React from 'react';
 class Son1 extends React.Component{
     constructor(){
         super()
     }
 
     render(){
         return(
             <React.Fragment>
                 {/* 子组件通过props 这个属性来接受父组件传过来的str */}
                 {this.props.str}
             </React.Fragment>
         )
     }
 
 }
 export default Son1;

页面上就可以得到 hello这个值

二. 子组件向父组件传值

在这里我们分为4个步骤

2.1、在父组件中声明一个函数，用于接收子组件的传值

2.2、通过组件属性的方法，把函数传递给子组件

先看父组件的代码

 import React from 'react';
 import Son1 from './Son1';
 class Father extends React.Component{
     constructor(){
         super();
 
     }
     // 1、在这里中声明一个函数，用于接收子组件的传值
     message(msg){
         // 通过形参接受到子组件的值并打印到控制台
         console.log(msg)
     }
     render(){
         return(
             <React.Fragment>
               {/* 在这里声明一个msg属性，通过组件属性的方法，把函数传递给子组件 */}
                 <Son1 msg={this.message}></Son1>
             </React.Fragment>
         )
     }
 
 }
 export default Father;

2.3、在子组件中通过props属性调用父组件的函数，并通过参数传值

 import React from 'react';
 class Son1 extends React.Component{
     constructor(){
         super()
     }
     render(){
         return(
             <React.Fragment>
             {/* 在子组件中通过props属性调用父组件的函数，并通过参数传值 */}
                 {this.props.msg('hello Word')}
             </React.Fragment>
         )
     }
 
 }
 export default Son1;

2.4、在父组件中的函数通过形参接收子组件的传值

这样就可以看到控制台打印的效果