react组件通信

一、父传子通信

实现步骤

1.父组件提供要传递的数据-state

2.给子组件标签添加属性值为state中的数据

3.子组件通过props接受父组件中传过来的数据

      a.类组件使用this.props获取props对象

      b.函数式组件直接通过参数获取props对象

代码实现：

import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    

      子组件1
      {props.msg}
    
  )
}

// 类子组件
class CSon extends React.Component {
  render() {
    return (
      

        子组件2
        {this.props.msg}
      
    )
  }
}
// 父组件
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      

        
父组件
        
        
      
    )
  }
}

export default App

props说明：

    props是只读对象，不能进行修改

    props可以传递任意数据（数字，字符串，布尔值，数组，对象，函数，JSX）

二、子传父通信

实现步骤

1.父组件提供一个回调函数，用于接受数据

2.将函数作为属性的值，传给子组件

3.子组件通过props调用 回调函数

4.将子组件中的数据作为参数传递给回调函数

代码实现

import React from 'react'

// 子组件
function Son(props) {
  function handleClick() {
    // 调用父组件传递过来的回调函数 并注入参数
    props.changeMsg('this is newMessage')
  }
  return (
    

      {props.msg}
      change
    
  )
}


class App extends React.Component {
  state = {
    message: 'this is message'
  }
  // 提供回调函数
  changeMessage = (newMsg) => {
    console.log('子组件传过来的数据:',newMsg)
    this.setState({
      message: newMsg
    })
  }
  render() {
    return (
      

        
父组件
        
      
    )
  }
}

export default App

三、兄弟组件通信

核心思路： 通过状态提升机制，利用共同的父组件实现兄弟通信

实现步骤

1.将共享状态提升到最近的公共组件中，由公共父组件管理这个状态

        提升共享状态

        提供操作共享状态的方法

2.要接受数据状态的子组件通过props接受数据

3.要传递数据状态的子组件通过props接受方法，调用方法传递数据

代码实现

import React from 'react'

// 子组件A
function SonA(props) {
  return (
    

      SonA
      {props.msg}
    
  )
}
// 子组件B
function SonB(props) {
  return (
    

      SonB
       props.changeMsg('new message')}>changeMsg
    
  )
}

// 父组件
class App extends React.Component {
  // 父组件提供状态数据
  state = {
    message: 'this is message'
  }
  // 父组件提供修改数据的方法
  changeMsg = (newMsg) => {
    this.setState({
      message: newMsg
    })
  }

  render() {
    return (
      <>
        {/* 接收数据的组件 */}
        
        {/* 修改数据的组件 */}
        
      
    )
  }
}

export default App

四、跨组件通信 Context

实现步骤

1.创建Context对象 导出 Provider 和 Consumer对象

2.使用Provider包裹上层组件提供数据

3.需要用到数据的组件使用Consumer包裹获取数据

代码实现

import React, { createContext }  from 'react'

// 1. 创建Context对象 
const { Provider, Consumer } = createContext()


// 3. 消费数据
function ComC() {
  return (
    
      {value => 
{value}
}
    
  )
}

function ComA() {
  return (
    
  )
}

// 2. 提供数据
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      
        

          
        
      
    )
  }
}

export default App