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、在父组件中的函数通过形参接收子组件的传值

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