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

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

import React, { Component } from 'react'

class Child extends Component{
    render() {
        return (
            

    
{this.props.title}
{/* 通过this.props接收传过来的值 */}
                子组件按钮 {/* 通过父组件传进来的方法来修改数据 */}
                this.props.add(2)}>累加2
                

                    {
                        this.props.arr.map((item,index)=>{
                        return 
{item}
                        })
                    }
                
            
        )
    }
}

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 (
            

                
父组件的文字
        
{this.state.num}
                切换{/* 添加事件 修改this.state里面的isShow,实现父传子的显示与隐藏 */}
                

                this.add(num)}
                /> {/* 把父组件方法传入子组件,传值需要写箭头函数需要子组件通过props来接收和执行 */}
               
            
        )
    }
}