父传子和子传父

父传子

这里我们父组件向子组件

传递this.state.isEdit的变量

//父组件传值
  constructor(props) {
        super(props);
        this.changeEdit = this.changeEdit.bind(this)
        this.selectOne = this.selectOne.bind(this)
        this.selectAll = this.selectAll.bind(this)

    }
    state={
        carts:[],
        isEdit:false,//是否是编辑状态
        checkedAll:false,//全选的状态
    
    }
....................
 

//子组件接收
    let isEdit = this.props.isEdit  

子传父

//父组件
  constructor(props) {
        super(props);
        this.changeEdit = this.changeEdit.bind(this)  
    }
state={}//这里是定义我们的变量
.........
 render() {
   return (
 

            )
    }
........
    /////////////编辑与完成的切换事件
    changeEdit(){
       this.setState({
           isEdit:!this.state.isEdit
       })
        console.log(this.state.isEdit)      
    }

//子组件
  render() {
        let isEdit = this.props.isEdit
        console.log("11111111",isEdit)
        let { item } = this.props;
        return (
            

            
                         
             购物车         
           {this.props.changeEdit()}} > {isEdit?"编辑":"完成"}         
            
        )
    }

点击事件()=>{this.props.changeEdit()}需要使用箭头函数

父组件向子组件传值的时候出现第一次为空值，第二次有值，但在子组件中不渲染数据该怎么办?
解决的办法是不要一次性把所有的数据传递给子组件，而是通过在父组件遍历数据后，把item传给子组件

//父组件
   render() {
        let {carts,checkedAll}=this.state
        console.log("checkedAll",checkedAll)
        return (
            

                

              //遍历数据的部分
                {carts.map((item,index)=>{
                   return  

                })}     
         
                
                

                
                
            
        )
    }

//子组件
   render(){      
        let isEdit = this.props.isEdit        

        let {item={}} = this.props        
        return(            
            
           
                        

                        {this.props.selectOne(this.props.index)}}/>
                        
                        

                    [鲜花]{item.goodName}                    
                    ¥{item.price}
                        
                      {
                          isEdit?
x12
: 

                          -
                          2
                          +                          
                      
                      删除
                      
                      }                 

                    
            
                
        )
    }