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>
 ) }