react中类组件关于组件之间的数据传递

父组件向子组件传值:

父组件：

//引入react
import React, { Component } from 'react'

//引入子组件
import '@/views/Zuoye415/ZuoyeIndex.scss'

export default class ZuoyeIndex extends Component {
    
    //父组件中在state中声明数据
    state={
        topInfo:{
            name:'张三',
            age:66
        }
    }
    render(){
        //对state中的数据进行扩展
        let {topInfo} = this.state
        retuurn(
            <div>
                    //在组件标签上{topInfo}为要传递的数据
                {
                    <Zuoye415 {topInfo}></Zuoye415>
                }
            </div>
        )

    }

}

子组件:

import React, { Component } from 'react'

export default class Zuoye415 extends Component {
    //constructor进行数据初始化
    constructor(props){
        super(props)
        console.log('props',props)
    }
    render(){
        //扩展props中的数据
        let {name,age} = this.props
        return(
            <div>
                {name}今年{age}岁了
            </div>
        )

     }



}

子组件向父组件传值:

子组件:

import React, { Component } from 'react'

export default class Zuoye415 extends Component {
    //constructor进行数据初始化
    constructor(props){
        super(props)
        console.log('props',props)
    }
    //子传父
    getBirther(text){//text为形参,可以为任意变量
    console.log(this)//查看是否存在this
    console.log('子组件中将要传递给父组件中的数据：',text)
    this.props.callback(text)//自定义函数callback通过this.props将生日的值传递给父组件
    
    }
    
    render(){
        //扩展props中的数据
        let {name,age} = this.props
        return(
            <div>
                {name}今年{age}岁了
            </div>
            <button onClick={() => this.getBirther('5-1')}>返回{name}的生日</button>
        )

     }



}

父组件通过子组件中自定义的函数callback进行接收,callback也是自定义的函数名

//引入react
import React, { Component } from 'react'

//引入子组件
import '@/views/Zuoye415/ZuoyeIndex.scss'

export default class ZuoyeIndex extends Component {
    
    //父组件中在state中声明数据
    state={
        topInfo:{
            name:'张三',
            age:66
        }
    }
    //接收子组件数据的事件
    gettext=(text)=>{//text为形参,可以为任意变量,为子组件传递过来的参数
        //接收子组件传递过来的参数
        console.log('子组件中传递过来的数据：',text)
    }
    render(){
        //对state中的数据进行扩展
        let {topInfo} = this.state
        retuurn(
            <div>
                    //在组件标签上{topInfo}为要传递的数据
                    //callback为子组件自定义的函数
                {
                    <Zuoye415 {topInfo} callback={this.gettext}></Zuoye415>
                }
            </div>
        )

    }

}