React7.组件间的通讯

Posted 2022-12-10 阿拉的梦想

【React】7.组件间的通讯

• 1. 父组件向子组件传递参数
• 2. 子组件向父组件传递参数
• 3. 兄弟组件传递参数
• 4. 跨组件通讯

组件之间经常需要共享数据，传递数据，互相调用方法等操作。这时就需要使用组件间通讯的技术。包括父子组件通讯，兄弟组件通讯。

1. 父组件向子组件传递参数

这个很简单，分两步：

1. 父组件使用标签调用子组件时传入参数；
2. 子组件使用props获取传过来的参数。

import React from 'react'
import ReactDOM from 'react-dom/client'

//父组件
class Parent extends React.Component 

  render() 
    return (
      <div>
        父组件
        <Child name="tom" />
      </div>
    )
  




//子组件
class Child extends React.Component 

  render() 
    return (
      <div>child recieved :this.props.name</div>
    )
  



const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)

2. 子组件向父组件传递参数

步骤：

1. 父组件定义一个回调函数；
2. 父组件调用子组件，并传入回调函数；
3. 子组件收到回调函数，调用回调函数，将信息传给父组件；

import React from 'react'
import ReactDOM from 'react-dom/client'

//父组件
class Parent extends React.Component 
  state = 
    msg: null
  

  //1.定义一个回调函数
  sendMsg = (msg) => 
    this.setState( msg: msg )
  

  render() 
    return (
      <div>
        父组件收到信息：this.state.msg
        <br />
        /* 2.父组件将回调函数发送给子组件 */
        <Child callback=this.sendMsg />
      </div>
    )
  




//子组件
//class Child extends Parent 
class Child extends React.Component 

  //5.事件函数，使用父组件传递过来的回调函数，并传入信息
  clickHandler = () => 
    this.props.callback(new Date().toLocaleTimeString())
  

  render() 
    return (
      //3.子组件调用自己的事件函数
      <button onClick=this.clickHandler>子组件向父组件发送时间</button>
    )
  



const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)

3. 兄弟组件传递参数

使用一个公共父组件的state来作为兄弟组件的共享变量，实现传递。

import React from 'react'
import ReactDOM from 'react-dom/client'

//父组件
class Parent extends React.Component 
  //初始化状态
  state = 
    count: 0
  

  //提供一个状态改变回调函数
  onIncrement = () => 
    this.setState( count: this.state.count + 1 )
  


  render() 

    return (
      <div>
        /* 调用子组件1 */
        <Child1 count=this.state.count />
        /* 调用子组件2 */
        <Child2 onIncrement=this.onIncrement />
      </div>
    )
  




//子组件1
const Child1 = (props) => 

  return (
    //使用父组件传来的值
    <div>计数器：props.count</div>
  )


//子组件2
const Child2 = (props) => 

  return (
    //调用父组件的回调函数
    <button onClick=() => props.onIncrement() >+1</button>
  )


const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)

4. 跨组件通讯

组件1调用组件2，组件2调用组件3;
想从组件1传信息给组件3，要是经过组件2中转会很麻烦。

所以，可以用context来实现：

import React from 'react'
import ReactDOM from 'react-dom/client'

//创建Context，里面名字时固定的
const  Provider, Consumer  = React.createContext();

//组件1
class Parent extends React.Component 


  render() 
    return (
      // 使用Provider传入值，任意类型的值
      // <Provider value="tom">
      <Provider value= name: "tom", age: 11 >
        <Node1 />
      </Provider>

    )
  





//组件2
const Node1 = () => 
  return (
    <Node2 />
  )



//组件3
const Node2 = () => 

  return (
    //Consumer使用值
    <Consumer>
      
        data => <div>node2:data.name,data.age</div>
      
    </Consumer>

  )



const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)