React兄弟组件之间的通信

Child2组件需要去更改Child1组件中的数据。
因为Child1和Child2是兄弟组件
所以数据和事件都放在最进的父级组件中去

兄弟组件通信的简单使用

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom

class PartentHello extends React.Component {
  state = {
    num:10
  }

  // Child2中的组件事件的回调更改Child1中的数据
  addHandler = () => { 
    this.setState({
      num: this.state.num+10
    })
  }

  render() { 
    return (
      

        
        
      
    )
  }
}

// 组件 Child1
const Child1 = props => {
  return (
    
数量{props.num }
  )
}

// 组件 Child2
const Child2 = props => {
  return (
    props.addAdd()}>增加
  )
}

ReactDOM.render(,document.getElementById('root'))

兄弟组件

将共享状态提升到最近的公共父组件中。
由公共父组件来管理这个状态（数据，事件）
它的思想就是状态提升

组件跨级传递 Context

当Child1组件中有Child2组件。
Child2组件中有Child3组件。
Child3中有Child4组件
我们怎么将Child1中的数据传递给Child4呢？？？

这个时候，我们就可以使用 Context.
他主要运用在数据跨组件传递。
如：背景颜色。 语言等

使用Context

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
import './index.css'
// Provider是提供者， Consumer接受者
const { Provider, Consumer } = React.createContext()

class PartentHello extends React.Component {
  render() { 
    return (
      
        

          
        
      
    )
  }
}

// 组件 Child1
const Child1 = () => {
  return (
    

      
 我是Child1组件 
      
    
  )
}

// 组件 Child2
const Child2 = () => {
  return (
   

      
 我是Child2组件 
      
    
  )
}

// 组件 Child3
const Child3 = () => {
  return (
   

      
 我是Child3组件 
      
        {/* 千万要注意 Consumer不能有其他内容，否者会报错 */}
        {data => {data}}
      
    
  )
}

ReactDOM.render(,document.getElementById('root'))

总结 Context

使用Context的时候，他提供了两个组件。
分别是 Provider, Consumer。
Provider组件是提供数据的。Consumer是接受数据的。
Provider是使用value进行传递。
Consumer通过下面这样的方法进行接收数据

  {data => {data}}