React组件间通信详解-CSDN博客

本文链接：https://blog.csdn.net/qq_43158069/article/details/90214753

父子通信

父组件将一个数据传递给子组件，但是这个数据只有父组件有权利更改，子组件不可以
代码：

    import React,{ Component,Fragment } from 'react'
 
 class Father extends Component {
     constructor () {
         super()
         this.state ={
             name: 'xiaolongbao'
         }
     }
     changname = () => {
         this.setState({
             name: 'baolongxiao'
         })
     }
     render() {
         let { name } = this.state
         return (
             <Fragment>
                 <h3>father</h3>
                 <button onClick = { this.changname }>点击</button>
                 <Son name = { name }></Son>
             </Fragment>
         )
     }
 }
 
 class Son extends Component {
     render() {
         let { name } = this.props
         return (
             <Fragment>
                 <h3>son</h3>
                 <p> { name } </p>
             </Fragment>
         )
     }
 }
 export default Father

ref链绑定

ref = “组件名称（son）”
ref = { el => this.el = el} 如果是一个函数，这里的el指的就是当前组件【推荐】
代码：

  import React,{ Component,Fragment } from 'react'
  class Father extends Component {
      changname = () => {
          this.refs.son.setState({
              name: 'baolongxiao'
          })
      }
      render() {
          return (
              <Fragment>
                  <h3>father</h3>
                  <button onClick = { this.changname }>点击</button>
                  <Son ref = "son"></Son>
              </Fragment>
          )
      }
  }
  
  class Son extends Component {
      constructor () {
          super()
          this.state ={
              name: 'xiaolongbao'
          }
      }
      render() {
          let { name } = this.state
          return (
              <Fragment>
                  <h3>son</h3>
                  <p> { name } </p>
              </Fragment>
          )
      }
  }
  export default Father

子父通信
父组件传递一个方法给子组件
代码：

	  import React,{ Component,Fragment } from 'react'
	class Father extends Component {
	    constructor () {
	        super()
	        this.state ={
	            name: 'xiaolongbao'
	        }
	    }
	    changname = () => {
	        this.setState({
	            name: 'baolongxiao'
	        })
	    }
	    render() {
	        let { name } = this.state
	        return (
	            <Fragment>
	                <h3>father</h3>
	                
	                <Son name = { name } changname = { this.changname }></Son>
	            </Fragment>
	        )
	    }
	}
	
	class Son extends Component {
	    render() {
	        let { name,changname } = this.props
	        return (
	            <Fragment>
	                <h3>son</h3>
	                <button onClick = { changname }>点击</button>
	                <p> { name } </p>
	            </Fragment>
	        )
	    }
	}
	export default Father

跨组件通信（context）

传统的写法
代码：

 	import React, { Component,Fragment } from 'react'
class GrandFather extends Component {
  constructor () {
    super()
    this.state = {
      money: 10000
    }
  }

  render () {
    return (
      <Fragment>
        <h3> grand-father 组件 </h3>
        <Father money = { this.state.money }></Father>
      </Fragment>
    )
  }
}

class Father extends Component {
  render () {
    return (
      <Fragment>
        <h3> father 组件  </h3>
        <Son money = { this.props.money }></Son>
      </Fragment>
    )
  }
}
class Son extends Component {
  render () {
    return (
      <Fragment>
        <h3> son 组件  </h3>
        <p> 爷爷给了我： { this.props.money } </p>
      </Fragment>
    )
  }
}
export default GrandFather

原先的跨组件传递要一级一级的传递数据，这种形式很是低效，context的出现解决了这个低效的方案

context 使用步骤：

创建context
const MoneyContext = React.crateContext(默认值)
使用创建的Context包裹目标组件的父组件

  <MoneyContext.Provider value = "20000">
    <Father></Father>
  </MoneyContext.Provider>

在目标组件中定义一个类属性 , 这个类属性叫做 contextType
直接在目标组件中通过 this.context 就可以获得数据了

    class Son extends Component {
      static contextType = MoneyContext
      render () {
        return (
          <Fragment>
            <h3> son 组件  </h3>
            <p> 爷爷给了我： { this.context } </p>
          </Fragment>
        )
      }
    }

示例代码：

	import React, { Component,Fragment } from 'react'
	
	const MoneyContext = React.createContext('10000')
	
	class GrandFather extends Component {
	
	  render () {
	    return (
	      <Fragment>
	        <h3> grand-father 组件 </h3>
	        <MoneyContext.Provider value = "20000">
	            <Father></Father>
	        </MoneyContext.Provider>
	      </Fragment>
	    )
	  }
	}
	
	class Father extends Component {
	  render () {
	    return (
	      <Fragment>
	        <h3> father 组件  </h3>
	        <Son></Son>
	      </Fragment>
	    )
	  }
	}
	class Son extends Component {
	    static contextType = MoneyContext
	  render () {
	    return (
	      <Fragment>
	        <h3> son 组件  </h3>
	        <p> 爷爷给了我： { this.context } </p>
	      </Fragment>
	    )
	  }
	}
	export default GrandFather

react的组件通信