react实现父传子子传父

父组件：

父传子：父：<Child name={...对象}/>

　　　　子：this.props.name

  render() {
    //解构
    let { data } = this.state;
    return (
      <ul>
        {
          data.map((item, index) => {
            return <List key={index} {...item} change={index => this.change(index)} />
          })
        }
      </ul>
    )
  }

  change(id) {
    //子传父
    let newarr = this.state.data;
    newarr.filter(item => {
      if (item.id == id) {
        item.flag = !item.flag
      }
    })
    //刷新数据
    this.setState({
      data:newarr
    })
  }

 

子组件：

子传父：父：<Child onHandleChild="函数"/>          父组件=>函数(参数){ }

　　　　子：this.props.onHandleChild(传值)   //在子组件中执行这个函数,会传值到父组件

 render() {
        return (
            <li>
                <img src={this.props.img} alt="" />
                <span className="name">{this.props.name}</span>
                <button onClick={() => { this.props.change(this.props.id) }} className={this.props.flag ? "grey" : "green"}>
　　　　　　　　　　{this.props.flag ? "已添加" : "添加"}</button>
            </li>
        )
    }