React父子组件传值(组件通信)的实现方法

目录
  • 1、父组件传值子组件
  • 2、子组件传值父组件
  • 3、兄弟组件传值

1、父组件传值子组件

在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值。

父组件向子组件传值,通过props,将父组件的state传递给了子组件。

父组件代码片段:

constructor(props){
    super(props)
    this.state={
      message:"i am from parent"
    }
  }
  render(){
    return(
          <Child txt={this.state.message}/>
    )
  }
}

子组件代码片段:

render(){
    return(
          <p>{this.props.txt}</p>
    )
}

完整示例

创建父组件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import User from './User';//引入子组件

//定义数据
const person = {
    name: 'Tom',
    age:20
}

ReactDOM.render(
    //渲染子组件,并向子组件传递name,age属性
    <User name={person.name} age={person.age}></User>
    , document.getElementById('root'));

创建子组件 User.js

import React from 'react';

class User extends React.Component{
    render(){
        return (
            // 使用props属性接收父组件传递过来的参数
            <div>{this.props.name},{this.props.age}</div>
        );
    }
}

export default User;

在父组件中可以使用展开运算符 ... 传递对象

index.js文件

ReactDOM.render(
    //渲染子组件,并向子组件传递name,age属性
    <User {...person}></User>
    , document.getElementById('root'));

User.js文件

render(){
   return (
       // 使用props属性接收父组件传递过来的参数
       <div>{this.props.name},{this.props.age}</div>
   );
}

2、子组件传值父组件

子组件通过调用父组件传递到子组件的方法向父组件传递消息的。

完整案例

子组件 Son.js 文件代码示例:

import React from 'react';
 
class Son extends React.Component {
    //构造方法
    constructor(){
        super();
        this.state = {
            inputValue:''
        }
    }
    //按钮点击事件
    handleClick(){
        //通过props属性获取父组件的getdata方法,并将this.state值传递过去
        this.props.getdata(this.state.inputValue);
    }
    //输入框事件,用于为this.state赋值
    handleChange(e){
        this.setState({
            inputValue: e.target.value
        });
    }
 
    render(){
        return (
            <React.Fragment>
                <input onChange={this.handleChange.bind(this)}></input>
                <button onClick={this.handleClick.bind(this)}>点击获取数据</button>
            </React.Fragment>
        );
    }
 
}
 
export default Son;

父组件 Parent.js 文件代码示例:

import React from 'react';
import Son from './Son';
 
class Parent extends React.Component {
    //构造方法
    constructor(){
        super();
        this.state = {
            mess: '' //初始化mess属性
        }
    }
    //用于接收子组件的传值方法,参数为子组件传递过来的值
    getDatas(msg){
        //把子组件传递过来的值赋给this.state中的属性
        this.setState({
            mess: msg
        });
    }
 
    render(){
        return (
            <React.Fragment>
                {/* 渲染子组件,设置子组件访问的方法,
                getdata属性名为子组件中调用的父组件方法名 */}
                <Son getdata={this.getDatas.bind(this)}></Son>
                <div>展示数据:{this.state.mess}</div>
            </React.Fragment>
        );
    }
 
}
 
export default Parent;

入口文件 index.js示例代码:

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
 
ReactDOM.render(<Parent></Parent>, document.getElementById('root'));

3、兄弟组件传值

兄弟组件之间的传值,是通过父组件做的中转 ,流程为:

组件A -- 传值 --> 父组件 -- 传值 --> 组件B

代码示例:

创建 Acls.js 组件,用于提供数据

import React from 'react';
 
class Acls extends React.Component {
    //按钮点击事件,向父组件Pcls.js传值
    handleClick(){
        this.props.data("hello...React...");
    }
 
    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
        );
    }
}
 
export default Acls;

创建父组件 Pcls.js 用于中转数据

import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls';
 
class Pcls extends React.Component {
    //构造函数
    constructor(){
        super();
        this.state = {
            mess: ''
        }
    }
    //向子组件Acls.js提供的传值方法,参数为获取的子组件传过来的值
    getDatas(data){
        this.setState({
            mess: data
        });
    }
 
    render(){
        return (
            <React.Fragment>
                Pcls组件中显示按钮并传值:
                <Acls data={this.getDatas.bind(this)}></Acls>
                <Bcls mess={this.state.mess}></Bcls>
            </React.Fragment>
        );
    }
}
 
export default Pcls;

创建子组件 Bcls.js 用于展示从 Acls.js 组件中生成的数据

import React from 'react';
 
class Bcls extends React.Component {
 
    render(){
        return (
            <div>在Bcls组件中展示数据:{this.props.mess}</div>
        );
    }
}
 
export default Bcls;

到此这篇关于React父子组件传值(组件通信)的实现方法的文章就介绍到这了,更多相关React父子组件传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React组件设计过程之仿抖音订单组件

    目录 前言 前期准备 实现后的组件效果 1. 组件设计思路 2. 实现 Myorder 组件 2.1 实现tab切换效果 2.2 获取数据 2.3 实现搜索功能 2.4 设置loading状态 2.5 实现Empty(空状态)组件 3. 实现 OederList 组件 4. 实现 OrderNote 组件 5. 实现 RecommendList 组件 最后 前言 作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心.组件就是对一

  • React函数组件与类组件使用及优劣对比

    目录 一.类组件的问题 原因一.因为this带来的问题: 问题描述 问题解析 原因二.类组件代码量比函数组件多: 原因三.类组件过于臃肿不易拆分: 二.函数组件的问题 挂载阶段:getDerviedStateFromProps VS 无 挂载阶段:UNSAFE_componentWillMount VS 无 挂载阶段:componentDidMount VS useEffect render: 生命周期,更新阶段:UNSAFE_componentWillRerciveProps VS 无 生命周

  • React 组件权限控制的实现

    目录 前话 正文 1. 控制方式 1.1 直接计算 1.2 通用权限Hoc 1.3 权限包裹组件 2. 控制结果 2.1 显隐控制 2.2 自定义渲染 3. 权限数据 3.1 静态权限 3.2 动态权限 前话 具备用户体系的业务系统往往需要具备权限控制的能力.前后不分离的开发模式权限控制主要由后端结合模版引擎实现,而前后分离的开发模式由前后两端协商权限配置分别进行数据权限控制和组件权限控制. 正文 权限配置格式不限,为进行后续演示本篇设定权限配置如下: export type IAuthConf

  • 从零搭建react+ts组件库(封装antd)的详细过程

    目录 整体需求 开发与打包工具选型 使用webpack作为打包工具 使用babel来处理typescript代码 使用less-loader.css-loader等处理样式代码 项目搭建思路 整体结构 方案思路 项目搭建实施 初始化 Babel引入 了解Babel webpack的基于babel-loader的处理流程 引入React相关库(externals方式) 编写组件代码 编译打包组件库 效果演示 处理样式(less编译与css导出) 依赖引入 配置webpack 编写样式代码 编译组件

  • React组件设计模式之组合组件应用实例分析

    本文实例讲述了React组件设计模式之组合组件应用.分享给大家供大家参考,具体如下: 这种模式本质上解决的是组件之间传值的问题.但是它对于传值以及一些内部操控的逻辑封装得更严密. 场景:希望减少上下级组件之间props的传递,简单来说就是不用传做显式地传值,来达到组件之间相互通信的目的 举例来说,某些界面中应该有Tabs这样的组件,由Tab和TabItem组成,点击每个TabItem,该TabItem会高亮, 那么Tab和TabItem自然要进行沟通.很自然的写法是像下面这样 <TabItem

  • React父子组件传值(组件通信)的实现方法

    目录 1.父组件传值子组件 2.子组件传值父组件 3.兄弟组件传值 1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <

  • Vue组件化常用方法之组件传值与通信

    相关知识点 父组件传值到子组件 子组件传值到父组件 兄弟组件之间传值 祖代和后代之间传值 任意两个组件之间传值 父组件传值到子组件 父组件传值到子组件基本方法有三个,分别为: 属性 props 引用 $refs 子元素 $children 日常开发中,我们用到 props 和 $refs 频率比较多,$children 相对较少些(我就没怎么使用过~). 属性 props 在父组件中添加属性,在子组件中接收使用,例如: 父组件: <HelloWorld msg="Welcome to Yo

  • 小程序组件传值和引入sass的方法(使用vant Weapp组件库)

    1.生命周期 1.onLoad():页面加载时触发,一个页面只加载一次. 2.onShow():页面显示切换的时候触发 3.onReady():页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 4.onHide():页面卸载时触发 2.小程序的框架: 小程序框架有两个层,一是视图层,一是逻辑层. 框架的视图层: 1.由 WXML 与 WXSS 编写,由组件来进行展示. 2.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. 3.WXML(WeiXi

  • 分享Vue组件传值的几种常用方式(一)

    目录 前言 第一种:父向子传值 新建文件导入结构 引入 注册 使用子组件 子组件内部代码完善 父组件内部代码完善 操作main.js文件 思路总结 前言 大家好,这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路.最常见的vue组件传值分为三种,第一种是父向子传值,第二种是子向父传值,第三种是兄弟组件之间的传值,下面我们先就第一种情况来进行分析和编写. 第一种:父向子传值 父向子传值意思就是要把父组件里的值传递给子组件,方法是在子组件内部自定义一个props属性,通过props属性来完

  • React父子组件间的传值的方法

    父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th

  • Vue组件通信中非父子组件传值知识点总结

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考:  https://www.jb51.net/article/121806.htm 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数据,又可以帮你接

  • React 父子组件通信的实现方法

    通讯是单向的,数据必须是由一方传到另一方. 1.父组件与子组件间的通信. 在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯. 父组件 App.js import React, { Component } from 'react'; import './App.css'; import Child from './child' class App extends Component { constructor(props){ super(props); this.

  • angular中不同的组件间传值与通信的方法

    本文主要介绍angular在不同的组件中如何进行传值,如何通讯.主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: 子组件创建事件EventEmitter对象,使用@output公开出去: 父组件监听子组件@output出来的方法,然后处理事件. 代码: // child 组件 @Component({ selector: 'app-child',

  • vue2.0组件之间传值、通信的多种方式(干货)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.

  • react 父子组件之间通讯props

    实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数 2,子组件的state发生变化时,在子组件的事件处理函数中,手动触发父函数传递进来的回调函数,同时时将子组件的数据传递回去(有时间研究) 父组件 父组件中定义一个函数,包含一个props的参数,函数内利用super(props)传递给子组件,this.state中用于定义本页面中要用到的以及要传递给子组件的变量. 父组件的render函数中利用<Table list={t

随机推荐