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