环境：搭建好脚手架
父组件向子组件通信
父组件：通过组件可以拿到父组件的参数，传递给子组件。
import React, { Component } from 'react'
import Sona from './component/Sona'
//import Sonb from './component/Sonb'
export default class App extends Component {
state={
num:"你好",
}
render() {
const {num}=this.state
return (
//通过组件属性传参，回调函数
)
}
}
Sona子组件
import React, { Component } from 'react'
export default class Sona extends Component {
render() {
//this.props可以获取到父组件传过来的参数
const {num}=this.props
return (
我是A子组件:{num}
)
}
}
子组件传父组件通信
父组件定义一个回调函数，子组件通过this.prop向回调函数传参。
父组件：
import React, { Component } from 'react'
import Sona from './component/Sona'
import Sonb from './component/Sonb'
export default class App extends Component {
state={
num:"你好",
user:'',
}
//Sona组传递的参数
putdata=(user)=>{
this.setState({
user
})
}
render() {
const {num,user}=this.state
return (
Sona子组件传过来的数据:{user}
)
}
}
Sona子组件：
import React, { Component } from 'react'
export default class Sona extends Component {
state={
sun:"向父组件通信",
fraternal:"你好，兄弟"
}
Parentdata=()=>{
const {sun}=this.state
this.props.putdata(sun)
}
render() {
const {num}=this.props
return (
我是A子组件:{num}
)
}
}
兄弟组件通信
兄弟组件时上面两种通信的结合，其中一个子组件向父组件的回调函数向父组件传递参数，父组件向另一组件传递参数，实行兄弟组件通信。
APP父组件：
import React, { Component } from 'react'
import Sona from './component/Sona'
import Sonb from './component/Sonb'
export default class App extends Component {
state={
num:"你好",
user:'',
frater:''
}
//Sona组传递的参数
putdata=(user)=>{
this.setState({
user
})
}
//Sona组传递的参数，接收又传给子组件
fraternalData=(f)=>{
this.setState({
frater:f
})
}
render() {
const {num,frater,user}=this.state
console.log("==========",this.putdata)
return (
Sona子组件传过来的数据:{user}
)
}
}
Sona组组件：
import React, { Component } from 'react'
export default class Sona extends Component {
state={
sun:"向父组件通信",
fraternal:"你好，兄弟"
}
//通过button点击事件向父组件的回调函数传递参数
Parentdata=()=>{
const {sun}=this.state
this.props.putdata(sun)
}
//组件挂在是向父组件回调函数发送参数，传给兄弟组件
componentDidMount=()=>{
const {fraternal}=this.state
this.props.fraternalData(fraternal)
}
render() {
//从父组件传过来的参数
const {num}=this.props
return (
我是A子组件:{num}
)
}
}
Sonb子组件：
import React, { Component } from 'react'
export default class Sonb extends Component {
render() {
//父组件传过来的参数，父组件的回调函数接收到的兄弟组件传过来的参数
const {frater}=this.props
return (
我是B子组件:Sona传信息给我=={frater}
)
}
}
组件三种通信以上完整写法。
推荐文章
您阅读本篇文章共花了：
发表评论