React组件通信实现流程详解
作者：花铛
这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下
组件间的关系
- 父子组件
- 兄弟组件
- 祖孙组件
通信方式
- 通过 props 方式传递数据。
- Context 方式（一般用于祖孙组件通信）。
- 集中式状态管理 Redux（一般用于很多组件间都要共享数据的情况下）。
父子组件通信
父子组件通信一般通过 props 方式传递数据。
父组件向子组件传递数据：
父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。
// Parent.js
import React, { Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
render(){
return(
<div>
// 父组件通过 props 向子组件传递参数
<Child title = "父组件向子组件通信" />
</div>
)
}
}
// Child.js
import React,{ Component } from "react";
export default class Child extends Component{
render(){
return(
// 子组件通过 this.props 接收父组件传递过来的参数
<div>{this.props.title}</div>
)
}
}子组件主动触发父组件方法，向父组件传递数据：
父组件将一个函数作为 props 传递给子组件，子组件调用该函数，便可以向父组件通信。
// Parent.js
import React,{ Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
handleChange(val){
console.log(val) // 我是子组件传给父组件的值
}
render(){
return(
<div>
// 父组件通过 props 把方法传递给子组件
<Child handleChange={this.handleChange} />
</div>
)
}
}
// Child.js
import React,{ Component } from "react";
export default class Child extends Component{
handleClick(){
// 子组件接收并调用父组件传递过来的方法
this.props.handleChange(‘我是子组件传给父组件的值')
}
render(){
return(
<button onClick={this.handleClick}>按钮</button>
)
}
}
父组件主动触发子组件方法，获取子组件数据：
// Parent.js
import React,{ Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
childRef = React.createRef()
handleClick(val){
//父组件触发子组件方法
this.childRef.current.handleChange()
}
render(){
return(
<div onClick={this.handleClick}>
// 父组件通过 props 把方法传递给子组件
<Child ref={this.childRef} />
</div>
)
}
}
// Child.js
import React,{ Component } from "react";
export default class Child extends Component{
handleChange(){
// 子组件执行逻辑操作
...
// 子组件返回数据，传递给父组件
// return {}
}
render(){
return(
<button onClick={this.handleChange}>按钮</button>
)
}
}
到此这篇关于React组件通信实现流程详解的文章就介绍到这了,更多相关React组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！