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 (
      <div>
        <Child1 num={ this.state.num}></Child1>
        <Child2 addAdd={ this.addHandler}></Child2>
      </div>
    )
  }
}

// 組件 Child1
const Child1 = props => {
  return (
    <h1>數量{props.num }</h1>
  )
}

// 組件 Child2
const Child2 = props => {
  return (
    <button onClick={()=>props.addAdd()}>增加</button>
  )
}

ReactDOM.render(<PartentHello></PartentHello>,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 (
      <Provider value='傳遞的數據'>
        <div className='box'>
          <Child1></Child1>
        </div>
      </Provider>
    )
  }
}

// 組件 Child1
const Child1 = () => {
  return (
    <div className='Child1'>
      <h1> 我是Child1組件 </h1>
      <Child2></Child2>
    </div>
  )
}

// 組件 Child2
const Child2 = () => {
  return (
   <div className='Child2'>
      <h1> 我是Child2組件 </h1>
      <Child3></Child3>
    </div>
  )
}

// 組件 Child3
const Child3 = () => {
  return (
   <div className='Child3'>
      <h1> 我是Child3組件 </h1>
      <Consumer>
        {/* 千萬要註意 Consumer不能有其他內容，否者會報錯 */}
        {data => <span>{data}</span>}
      </Consumer>
    </div>
  )
}

ReactDOM.render(<PartentHello></PartentHello>,document.getElementById('root'))

總結 Context

使用Context的時候，他提供了兩個組件。
分別是 Provider, Consumer。
Provider組件是提供數據的。Consumer是接受數據的。
Provider是使用value進行傳遞。
Consumer通過下麵這樣的方法進行接收數據
<Consumer>
  {data => <span>{data}</span>}
</Consumer>

遇見問題，這是你成長的機會，如果你能夠解決，這就是收穫。

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關註博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！