父子组件通信一般通过 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>
)
}
}
