（十）React的子传父 及 优化编写

（十）React的子传父 及 优化编写

子传父：

其实就是事件回传，在父传子的基础上 将传递的参数改为函数体 子组件在props上进行数据的回传

//引用子组件
<child getData={ this.getData} />
getData = (value)=>{
    console.log(value)
}
//父组件 
this.props.getData('回传的值')

修改对象值的方式

const { objData } =  this.state
obj.map( (item) = > {
   if ( item.id === '1' ){
    return { ...item, a:'1' }   //什么意思呢  就是你在获取到对象之后的时候你需要进行状态的修改  {...objData} 的运算符  可以进行赋值 在a:'1' 可以修改的其中的值
   }
)

修改数组的方式

const { arreyData } = this.state
const newData = [...arreyData , Objdata]
this,setState({arreyData, newData})

对数组进行条件统计的reduce

reduce（ ） 能穿两个参数 第一个是一个函数 ，第二个是从几开始 （初始值）
const doneCount = tools.reduce((prev, item) =>{return prev + (item.done ? 1 : 0) },0)
函数本身能传两个参数 第一个就是 pre 之前的值 （上一次的返回值） item（对谁进行遍历 就是一个一个的对象） （十）React的子传父 及 优化编写

子传父：

其实就是事件回传，在父传子的基础上 将传递的参数改为函数体 子组件在props上进行数据的回传

//引用子组件
<child getData={ this.getData} />
getData = (value)=>{
    console.log(value)
}
//父组件 
this.props.getData('回传的值')

修改对象值的方式

const { objData } =  this.state
obj.map( (item) = > {
   if ( item.id === '1' ){
    return { ...item, a:'1' }   //什么意思呢  就是你在获取到对象之后的时候你需要进行状态的修改  {...objData} 的运算符  可以进行赋值 在a:'1' 可以修改的其中的值
   }
)

修改数组的方式

const { arreyData } = this.state
const newData = [...arreyData , Objdata]
this,setState({arreyData, newData})

对数组进行条件统计的reduce

reduce（ ） 能穿两个参数 第一个是一个函数 ，第二个是从几开始 （初始值）
const doneCount = tools.reduce((prev, item) =>{return prev + (item.done ? 1 : 0) },0)
函数本身能传两个参数 第一个就是 pre 之前的值 （上一次的返回值） item（对谁进行遍历 就是一个一个的对象）