组件间的通信

父传子

通过props将父组件中的属性传递给子组件

// 父组件
class Fal extends React.Component {
  state = {
      name:'laoli'
  },
    render (){
      return (<San name={this.state.name} />)
  }
}
// 子组件
class San extends React。Component{
    state = {},
  render()=>{
    return (<p>{this.props.name}</p>)
  }
}

子传父

在父组件中准备一个方法
将这个方法传递给子组件
子组件调用这个方法，通过参数形式传递数据

// 父组件
class Fal extends React.Component{
    state = {
      age:''
  }
    // 回调函数
    getAge = data => {
      consoles.log('获取到的子组件数据'，data)
    // 更新父组件数据
    this.setState({
        age:data
    })
  }
    render(){
      return (<San getage = { this.gatAge } />)
  }
}
// 子组件
class San extends React.Component{
  state = {
      age:18
  }
    handleClick = () =>{
    // 调用传递来的方法
      this.props.getage(this.state.age)
  }
  rebder(){
      return (<button onClick = { this.handleClick } >按钮</button>)
  }
}

兄弟组件间数据传递

状态提升思想
将兄弟间需要通信的数状态提升到一个公用的父组件中
父组件提供状态和操作状态的方法
两个子组件通过props接收父组件中的状态

// 父组件
class Fal extends React.Component{
  // 公共状态
  state = {
      num:12
  }
    // 操作状态
    pusNum=data=>{
    this.setState({num,data})
  }
  render(){
    return (
      <div>
        <Gege num={this.state.num} pusNum={this.pusNum}/>
      <Didi num={this.state.num} pusNum={this.pusNum}/>
    </div>
  )}
}
// 哥哥组件
const Gege= props => {
  function handelClick(){
      props.pusNum(15)
  }
      return <div>
        {props.num}
        <button onClick={handelClick}>加</button>
        </div>
}
// 弟弟组件
class Didi extends React.Component{
  handelClick=()=>{
        this.props.pusNum(1)        
  }
  render (){
      return <div>
        {this.props.num}
         <button onClick={this.handelClick}>减</button>
      </div>
  }
}

跨多级组件间数据的传递

在跨越多级组件的情况下，使用Context进行数据的传递

// 调用 React.createContext 方法拿取其中的两个组件
const {Provider,Consumer} = React.createContext()
// provider 负责传递数据
// Consumer 负责接收数据
// 一级组件
class One extends React.Component{
    render(){
      return (
      // 使用Provider组件 包裹当前其他内容  使用value属性进行数据传递
        <Provider  value='一级'>
          <div>一级</div>
        <Tow/>
      </Provider>
    )
  }
}
// 二级组件
class Tow extends React.Component {
  render() {
    return (
      <div>
        <div>二级</div>
        <Ser />
      </div>
    )
  }
}
// 三级组件
class Ser extends React.Component {
  render() {
    return (
      // 使用Consumer组件 调用回调接收数据 返回其他的JSX结构
      <Consumer>{data => <div>三级接收到的数据 {data}</div>}</Consumer>
    )
  }
}