React父子传值，兄弟传值及Context的详解

---

1.子组件向父组件传值

1.1 代码

// 父组件
class Parent extends React.Component{
    
    
  state = {
    
    
    parentMsg:''
  }
  getChildMsg = (data) => {
    
    
    console.log(data);
    this.setState({
    
    
      parentMsg : data
    })
  }
  render(){
    
    
    return(
      <div className='parent'>
        {
    
    /* 父组件 */}
        父组件：{
    
    this.state.parentMsg}
        <Child getMsg={
    
    this.getChildMsg} />
      </div>
    )
  }
}

//子组件
class Child extends React.Component {
    
    
  state = {
    
    
    msg:'上号'
  }

  handleClick = () => {
    
    
    //子组件调用父组件中传递过来的回调函数
    this.props.getMsg(this.state.msg)
  }
  render(){
    
    
    return(
      <div className='child'>
        <p>子组件<button onClick={
    
    this.handleClick}>传递给父组件</button></p>
      </div>
    )
  }
}

const container = createRoot(document.getElementById('root'))
container.render(<Parent />)

1.2 效果

点击button后：

1.3 原理

• 利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
• 父组件提供一个回调函数，用来接收数据
• 将该函数作为属性的值，传递给子组件
• 子组件通过props调用回调函数

2.父组件向子组件传值

2.1 代码

//父组件
class Parent extends React.Component{
    
    
  state = {
    
    lastName:'张'}
  render(){
    
    
    return(
      <div className='parent'>
        父组件
        传递给子组件<Child name={
    
    this.state.lastName} />
      </div>
    )
  }
}

//子组件
const Child = (props) =>{
    
    
  return (
    <div className='child'>
      <p>子组件，接收到父组件的数据：{
    
    props.name}</p>
    </div>
  )
}

const container = createRoot(document.getElementById('root'))
container.render(<Parent />)

2.2 效果

2.3 原理

• 父组件提供要传递的state数据
• 给子组件标签添加属性，值为state中的数据
• 子组件中通过props接收父组件中传递的数据

3.兄弟传值

3.1 代码

//父组件
class Counter extends React.Component {
    
    
  //通过共享状态
  state = {
    
    
    count : 0
  }
  //提过修改状态的方法
  onIncrement = () => {
    
    
    this.setState({
    
    
      count:this.state.count + 1
    })
  }
  render(){
    
    
    return(
      <div>
        <Child1 count={
    
    this.state.count} />
        <Child2 onIncrement={
    
    this.onIncrement} />
      </div>
    )
  }
}

const Child1 = (props) => {
    
    
  return <h1>计数器：{
    
    props.count}</h1>
}

const Child2 = (props) => {
    
    
  return <button onClick={
    
    () => props.onIncrement()}>+1</button>
}

const container = createRoot(document.getElementById('root'))
container.render(<Counter />)

3.2 效果

点击button便会加一

3.3 原理

• 将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
• 这个称为状态提升
• 公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法
• 要通讯的子组件只需要通过props接收状态或操作状态的方法

4.Context

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递

作用： 跨组件传递数据

4.1 代码

// Provider提供者: Consumer:消费者
const {
    
     Provider,Consumer } = React.createContext()

class App extends React.Component{
    
    
  render(){
    
    
    return(
      <div className='app'>
        <Node />
      </div>
    )
  }
}

const Node = (props) => {
    
    
  return(
    <Provider value='Zhang'>
      <div className='subnode'>
        <Child/>
      </div>
    </Provider>
  )
}

const Child = (props) => {
    
    
  return <div className='child'>
    <Consumer>
      {
    
    
        data => <span>子节点：{
    
    data}</span>
      }
    </Consumer>
  </div>
}

const container = createRoot(document.getElementById('root'))
container.render(<App />)

4.2 效果

4.3 原理

• 如果两个组件相隔层级比较多，可以使用Context实现组件通讯
• Context提供了两个组件：Provider 和 Consumer
• Provider组件： 用来提供数据
• Consumer组件： 用来消费数据