React父传子和子组件触发修改父组件修改数据

子组件是不可以直接修改props的,只能通过触发父组件的方法来修改
父传子通过子组件标签上定义属性后传入this.state的数据

import React, { Component } from 'react'

class Child extends Component{
    render() {
        return (
            <div style={{display:this.props.isShow===true? 'block' : 'none'}}>
    <p style={{color:this.props.fontColor}}>{this.props.title}</p>{/* 通过this.props接收传过来的值 */}
                <button onClick={this.props.change}>子组件按钮</button> {/* 通过父组件传进来的方法来修改数据 */}
                <button onClick={()=>this.props.add(2)}>累加2</button>
                <ul>
                    {
                        this.props.arr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default class app5 extends Component {
    constructor(props){
        super(props)
        this.state = {
            person:['虚竹','段誉','王语嫣'],
            isShow:true,
            num:20
        }
    }
    change(){
        this.setState({
            isShow:!this.state.isShow /* 使用this.setState 将this.state.isShow取反 */
        })
    }
    add(num){
        this.setState({
            num:this.state.num + num
        })
    }
    render() {
        return (
            <div>
                <p>父组件的文字</p>
        <p>{this.state.num}</p>
                <button onClick={this.change.bind(this)}>切换</button>{/* 添加事件 修改this.state里面的isShow,实现父传子的显示与隐藏 */}
                <hr/>
                <Child title='你好世界' 
                fontColor="pink" 
                arr={this.state.person} 
                isShow={this.state.isShow}  /*  子组件定义属性把父组件的值通过this.state传进去 */
                change={this.change.bind(this)}
                add={(num)=>this.add(num)}
                /> {/* 把父组件方法传入子组件,传值需要写箭头函数需要子组件通过props来接收和执行 */}
               
            </div>
        )
    }
}