react 父子组件之间相互传值

From: https://blog.csdn.net/luzhaopan/article/details/85003362

1、定义父组件

import React, { PureComponent } from 'react';

    export default class Father extends PureComponent {

      render(){

        return(
          <div>
            <p>父组件</p>

          </div>
        )
      }
    }

2、定义子组件

import React, { PureComponent } from 'react';

    export default class Children extends PureComponent {

      render(){

        return(
          <div>
            <p>子组件</p>

          </div>
        )
      }
    }

3、父组件向子组件传值

import React, { PureComponent } from 'react';
    // 引入子组件
    import Children from '@/components/Children';


    export default class Father extends PureComponent {

      render(){

        // 传给子组件的数据
        const data= {

          lt: '520',
        };

        return(
          <div>
            <p>父组件</p>

             <Children data={ data } />

          </div>
        )
      }
    }

子组件获取父组件传过来的值

import React, { PureComponent } from 'react';

    export default class Children extends PureComponent {

     constructor(props) {
        super(props);
        this.state = {

      }

      render(){

        return(
          <div>
            <p>子组件</p>
            // 获取父组件的值
            <p>{ this.props.data.lt }</p>

          </div>
        )
      }
    }

4、子组件向父组件传值

import React, { PureComponent } from 'react';

    export default class Children extends PureComponent {


    // 选中对应节点，选出符合条件的值
      onSelect = () => {
        // 向父组件传值
        const lzp= {
          name: lut,
          code: '1314',

        };
        this.props.handleData(lzp);
      };

      render(){

        return(
          <div>
            <p>子组件</p>
            <Button onClick={this.onSelect}> 向父组件传值 </Button>

          </div>
        )
      }
    }

import React, { PureComponent } from 'react';
    // 引入子组件
    import Children from '@/components/Children';


    export default class Father extends PureComponent {

    handleData = (a) => {
        // 获取子组件传来的值a
        console.log(a); // lzp= {name: lut,code: '1314'}

      };

      render(){

        return(
          <div>
            <p>父组件</p>

             <Children handleData={this.handleData} />

          </div>
        )
      }
    }

react 父子组件之间相互传值相关推荐

react父子组件之间的传值
父传子------------- 父组件 constructor(props){super(props)this.state={message:"我是父组件传来的"} }rende ...
Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的 a.父子组件之间通过props b.子父组件之间通过$emit 2.简单demo描述父组件包含一个点击按钮,用于改变子组件的显示与隐藏: 子组件只有一 ...
vue父子组件及非父子组件之间的传值
一.父组件向子组件传值在vue中通常使用props向子组件传递数据 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后 ...
vue父子组件之间的传值，及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
react兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
vue3 - 父子组件之间的传值
近期学习 vue3 的父子组件之间的传值,发现跟 vue2.x的父子组件之间的传值并没有太大的区别,我这边总结一下,希望对大家有所帮助. 一.父组件向子组件传值父组件向子组件传值的时候,子组 ...
Vue学习——组件基础之父子组件之间的传值
一.父组件向子组件传值作用:因为在Vue的组件化开发中页面的各个功能模块对应各个组件,组件之间的传值变得尤为重要. 举例:父组件相当于导航栏,子组件相当于点击导航栏之后显示对应的内容界面:点击导航栏 ...
vue.js html 相互传值,Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值...
一.父子组件传值要点1:父组件赋予子组件属性值,子组件通过props 来接收值. 要点2:父组件可以通过子组件对象($ref),来调用子组件的属性以及方法要点3:子组件通过$emit 来调用父组 ...

react 父子组件之间相互传值

react 父子组件之间相互传值相关推荐

最新文章

热门文章