美文网首页React教程
React_组建通信 — 父组件向传子组件传递数据 / 子组件

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

作者: _Miss_Chen | 来源:发表于2019-04-15 19:11 被阅读0次

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

先创建三个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

相关文章

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

    父组件向传子组件传递数据 先创建三个js文件,也就是三个组件 boss.js为最大的组件: dome.js 为父组...

  • uniapp 父组件与 renderjs 子组件通信

    父组件向子组件通信 使用 prop 传递数据,子组件监听数据变化 子组件向子组件通信 父组件创建回调函数,子组件特...

  • ReactNative组件间的通信

    父组件向子组件通信 父组件向子组件传值 父组件向子组件传递方法 子组件向父组件通信 子组件向父组件传值 子组件向父...

  • 父传子实现

    父传子实现 目标任务: 实现父子通信中的父传子,把父组件中的数据传给子组件 实现步骤 父组件提供要传递的数据 - ...

  • React基础v2

    父子组件通信 props -父组件向子组件传递数据父组件import Header from './Header'...

  • 组件之间如何通信

    父组件传递数据给子组件 可以通过props属性来实现 父组件: 子组件 子组件向父组件通信 如果子组件想要改变数据...

  • 19.ReactNative组件间的通信

    父组件向子组件通信: 父组件向子组件传值 通过props传递 在父组件中name='我是父组件向子组件传递的参数'...

  • ReactNative组件间的通信

    父组件向子组件通信 父组件向子组件传值 通过props传递 在父组件中name='我是父组件向子组件传递的参数' ...

  • react 组件通信 + className的三目运算

    1.父组件向子组件传递数据 2.className 的三目运算 3.子组件向父组件通信需要使用父组件传递给子组件的事件

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

网友评论

    本文标题:React_组建通信 — 父组件向传子组件传递数据 / 子组件

    本文链接:https://www.haomeiwen.com/subject/pgupwqtx.html