React（一）父子组件之间的通信

无论是React，还是Vue，父子组件之间的通信都是组件式开发至关重要的一部分。备注一下基础要点。

1、父组件向子组件传值

父组件向子组件传值是在调用子组件的时候通过参数传递给子组件

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'export default class Communicate extends Component{constructor(props){super(props)this.fartherProps = '我是父组件的值，子组件需要我'}render(){let param = {fartherProps: this.fartherProps}return(<div id="Communicate"><h1>父子组件之间的通信</h1><p>{'-----------------------父组件-----------------------'}</p><div><h2>我是父组件</h2></div><br/><p>{'-----------------------子组件-----------------------'}</p><CommunicateChild param={param}/></div>)}
}

.子组件代码

import React, { Component } from 'react'export default class CommunicateChild extends Component{render(){return(<div id="CommunicateChild"><div><h3>子组件调用父组件的值</h3><p>{this.props.param.fartherProps}</p></div></div>)}
}

2、子组件调用父组件的方法

有时候子组件需要调用父组件的某个方法，需要在父组件加载子组件的时候将方法当参数传递给子组件。

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'export default class Communicate extends Component{constructor(props){super(props)}methodToChild(){alert("子组件调用父组件的方法")}render(){return(<div id="Communicate"><h1>父子组件之间的通信</h1><p>{'-----------------------父组件-----------------------'}</p><div><h2>我是父组件</h2></div><br/><p>{'-----------------------子组件-----------------------'}</p><CommunicateChild  methodToChild={this.methodToChild.bind(this)}/></div>)}

.子组件代码

import React, { Component } from 'react'export default class CommunicateChild extends Component{constructor(props){super(props)this.getParentMethod = this.getParentMethod.bind(this)}getParentMethod(){this.props.methodToChild()}render(){return(<div id="CommunicateChild"><div><h3>子组件调用父组件的方法</h3><p><button onClick={this.getParentMethod}>调用父组件的方法</button></p></div></div>)}
}

3、父组件调用子组件的方法

在没有使用react-redux的情况下，父组件通过读取子组件的ref，可获取子组件全部的信息，从而调用子组件的方法或值。代码如下：

this.refs.childRef.childMethod()
//childRef为子组件的ref，childMethod为子组件的方法

但是，当使用的react-redux后，ref获取的是connect组件的信息，因而我们需要另外想办法，把子组件的信息传递给父组件。

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'export default class Communicate extends Component{constructor(props){super(props)this.handleClick = this.handleClick.bind(this)}//绑定子组件onRef = (ref) => {//this.child即为子组件this.child = ref}//执行调用子组件的方法handleClick(){this.child.methodToParent()}render(){return(<div id="Communicate"><h1>父子组件之间的通信</h1><p>{'-----------------------父组件-----------------------'}</p><div><h3>{'父组件调用子组件的方法'}</h3><p><button onClick={this.handleClick}>调用子组件方法</button></p></div><br/><p>{'-----------------------子组件-----------------------'}</p><CommunicateChild onRef={this.onRef}/></div>)}
}

.子组件代码

import React, { Component } from 'react'export default class CommunicateChild extends Component{constructor(props){super(props)}//组件render后调用父组件的方法把子组件的this传递给父组件componentDidMount(){this.props.onRef(this)}//父组件调研该方法methodToParent(){alert("父组件调用到子组件的方法了")}render(){return(<div id="CommunicateChild"><div></div></div>)}
}

4、父组件调用子组件的值

主要通过子组件通过传递参数调用父组件某个方法改变父组件的state

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'export default class Communicate extends Component{constructor(props){super(props)this.handleEmail = this.handleEmail.bind(this)this.state = {email: ''}  }//子组件调用父组件的方法传值handleEmail(val){this.setState({email: val});}render(){return(<div id="Communicate"><h1>父子组件之间的通信</h1><p>{'-----------------------父组件-----------------------'}</p><div><h2>我是父组件</h2><h3>{'父组件调用子组件的值'}</h3><div>用户邮箱：{this.state.email}</div></div><br/><p>{'-----------------------子组件-----------------------'}</p><CommunicateChild handleEmail={this.handleEmail}/></div>)}
}

.子组件代码

import React, { Component } from 'react'export default class CommunicateChild extends Component{constructor(props){super(props)this.handleChange = this.handleChange.bind(this)this.childProps = "我是子组件的值，父组件调用我"}componentDidMount(){this.props.handleEmail(this.childProps)}//传值给父组件handleChange(){var val = this.refs.emailDom.value;val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");this.props.handleEmail(val);}render(){return(<div id="CommunicateChild"><div><h3>子组件调用父组件的方法传值给父组件</h3><p><input ref='emailDom' type="text" onChange={this.handleChange}/></p></div></div>)}
}

GitHab React父子组件通信

React（一）父子组件之间的通信相关推荐

React中父子组件之间的通信
vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
vue的父子组件之间的通信详解
vue的父子组件之间的通信详解一.父组件给子组件传值父组件引入子组件,并对子组件进行监听 <template><div><h1&g ...
VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
【Vue】父子组件之间的通信
情景父组件有一个 btnList 数组,里面存放着按钮的名称和按钮的id,现在要把这个数组传入到子组件中进行渲染. 子组件渲染出按钮后,点击按钮,父组件的 h1 标签中会显示出当前点击的按钮是哪一个 ...
vue父子组件之间的通信
在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组 ...

React（一）父子组件之间的通信

1、父组件向子组件传值

.父组件代码

.子组件代码

2、子组件调用父组件的方法

.父组件代码

.子组件代码

3、父组件调用子组件的方法

.父组件代码

.子组件代码

4、父组件调用子组件的值

.父组件代码

.子组件代码

GitHab React父子组件通信

React（一）父子组件之间的通信相关推荐

最新文章

热门文章