React(一)父子组件之间的通信
无论是React,还是Vue,父子组件之间的通信都是组件式开发至关重要的一部分。备注一下基础要点。1、父组件向子组件传值父组件向子组件传值是在调用子组件的时候通过参数传递给子组件.父组件代码import React, { Component } from 'react'import CommunicateChild from './communicateChild'ex...
·
无论是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父子组件通信
更多推荐
已为社区贡献2条内容
所有评论(0)