父组件向传子组件传递数据

先创建三个js文件，也就是三个组件

image.png

boss.js为最大的组件：

import React, {Component} from 'react';
import Dome from './dome'


class Boss extends Component {
    render() {
        return (
            <div>
                <h1>Boss</h1>
                <Dome/>
            </div>
        );
    }
}

export default Boss;

dome.js 为父组件：

我们在父组件中写需要向子组件传递的数据

import React, {Component} from 'react';
import Dome1 from './dome1'//把子组件引到父组建中

export default class Dome extends Component {
    constructor() {
        super();
        this.state = {
            aa:'小陈同学你好，我是父组件传递过来的数据'
        }
    }


    render() {
        return (
            <div>
                <h1>dome</h1>
                <Dome1 bb={this.state.aa} />
            </div>
        );
    }
}

B.js为父组件：

import React, {Component} from 'react';

export default class Dome1 extends Component {
    constructor() {
        super();
        this.state = {

        }
    }

    
    render() {
        return (
            <div>
                <h1>dome1</h1>
                {this.props.bb}
            </div>
        );
    }
}

学习完了父传子，我们来看一下子传父

React_组建通信 — 子组件向传父组件传递数据

子组件向传父组件传递数据

我们先创建三个js文件，也就是三个组件

image.png

A 为最大的组件：

import React, {Component} from 'react';
import  B from  './B'  //把父组件B.js引入进来

class A extends Component {
    render() {
        return (
            <div>
                <p>A</p>
                <B/>
            </div>
        );
    }
}

export default A;

C 为子组件：

我们在子组件中写需要向父组件传递的数据

import React, {Component} from 'react';

class C extends Component {
    aa(){
        this.props.cc('小陈最可爱')//使用this.props获得 子组件的props属性
    }
    render() {
        return (
            <div>
                <p>C组件</p>
                <button onClick={this.aa.bind(this)}>子组件向父组件传递数据</button>
            </div>
        );
    }
}

export default C;

B.js为父组件：

import React, {Component} from 'react';
import  C from  './C'  //把子组件引进来

class B extends Component {
    bb(val){  //绑定一个处理函数  这个函数中的参数就是 子组件传递过来的数据
        console.log(val)
    }
    render() {
        return (
            <div>
                <p>B组件</p>
                <C cc={this.bb.bind(this)}></C>

            </div>
        );
    }
}

export default B;

最后页面上显示

image.png

控制台输出

image.png