React.js组件的通信

环境：搭建好脚手架

父组件向子组件通信

父组件：通过组件可以拿到父组件的参数，传递给子组件。

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 (
      <div>
        //通过组件属性传参，回调函数
        <Sona num={num} />
        
      </div>
    )
  }
}

Sona子组件

import React, { Component } from 'react'

export default class Sona extends Component {
  render() {
    //this.props可以获取到父组件传过来的参数
    const {num}=this.props
    return (
      <div>
        <h1>我是A子组件:{num}</h1>
       
      </div>
    )
  }
}

子组件传父组件通信

父组件定义一个回调函数，子组件通过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 (
      <div>
        <h1>Sona子组件传过来的数据:{user}</h1>
        <Sona num={num} putdata={this.putdata}/>
      </div>
    )
  }
}

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 (
      <div>
        <h1>我是A子组件:{num}</h1>
        <button onClick={this.Parentdata}>向父组件通信</button>
      </div>
    )
  }
}

兄弟组件通信

兄弟组件时上面两种通信的结合，其中一个子组件向父组件的回调函数向父组件传递参数，父组件向另一组件传递参数，实行兄弟组件通信。

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 (
      <div>
        <h1>Sona子组件传过来的数据:{user}</h1>
        <Sona num={num} putdata={this.putdata} fraternalData={this.fraternalData}/>
        <Sonb frater={frater}/>
      </div>
    )
  }
}

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 (
      <div>
        <h1>我是A子组件:{num}</h1>
        <button onClick={this.Parentdata}>向父组件通信</button>
      </div>
    )
  }
}

Sonb子组件：

import React, { Component } from 'react'

export default class Sonb extends Component {
  render() {
    //父组件传过来的参数，父组件的回调函数接收到的兄弟组件传过来的参数
    const {frater}=this.props
    return (
      <div>
        <h1>我是B子组件:Sona传信息给我=={frater}</h1>
      </div>
    )
  }
}

组件三种通信以上完整写法。