react的通信

1.父组件的值传递给子组件

import React, { Component } from 'react'
import "./Pay.less"

export default class Pay extends Component {
  state={
    list:['111','222','333']
  }
  render() {
    return (
      

        
        
      
    )
  }
}


 class Acc extends Component {
 
  render() {
    return (
      

        {
          this.props.chlidlist.map((item,index)=>
            {item}
          )
        }
      
    )
  }
 
}


class Aay extends Component {
  render() {
    return (
      
Pay
    )
  }
}

2.父组件的方法，怎么传递给子组件

import React, { Component } from 'react'
import "./Pay.less"

export default class Pay extends Component {
  state={
    list:['111','222','333']
  }
  render() {
    return (
      

        
        
      
    )
  }
  chlidfn=()=>{
    console.log(1);
  }
}




 class Acc extends Component {
  render() {
    return (
      

        {
          this.props.chlidlist.map((item,index)=>
            {
              this.cnfn()
            }}>{item}
          )
        }
        
      
    )
    
  }
  cnfn=(index)=>{
   this.props.childClick()
  }
}
class Aay extends Component {
  render() {
    return (
      
Pay
    )
  }
}

3.子传给父了

import "./Pay.less"

export default class Pay extends Component {
  state={
    list:['111','222','333']
  }
  render() {
    return (
      

        
        
      
    )
  }
  chlidfn=(id)=>{
    console.log(id);
  }
}




 class Acc extends Component {
  render() {
    return (
      

        {
          this.props.chlidlist.map((item,index)=>
            {
              this.cnfn(index)
            }}>{item}
          )
        }
        
      
    )
    
  }
  cnfn=(index)=>{
   this.props.childClick(index)
  }
}
class Aay extends Component {
  render() {
    return (
      
Pay
    )
  }
}

4. 子组件的方法传递给父组件