和vue类似，父组件维护自己的状态state,通过在子组件引用的时候，添加属性，给子组件传递数据。子组件中【类组件】，可以在constroctor中添加参数props来查看父组件的传值，也可以不显示添加props参数，因为只要组件传值了，子组件默认有props，获取传递的数据。

父传子

父组件

子获取

constructor接受props参数

constructor不接受props参数，render内直接获取this.props

子props类型校验

类型校验功能参考vue中props功能

props: {
    title: {
        type: String,
        default: ''
    }
}

react中，写法和vue不一样且对于type的指定有两种方式：

先说type的指定：

• 项目继承ts和flow，直接进行类型验证
• 没有继承上述2个，通过react自带的库React.PropTypes进行参数验证
• 备注：React.PropTypes从react15开始已经迁移到另一个单独的包中，需要单独引入=>prop-types：import PropTypes from 'prop-types'

prop-type使用官网介绍：zh-hans.legacy.reactjs.org/docs/typech…

再说props验证的语法：

在组件外，通过组件名.propTypes = { }验证类型；通过组件名.defaultProps={}给默认值

子传父

结论：子中调用父回调 react中没有像vue一样规定的this.$emit('eventName',arg)这样的语法，子传父使用的思路是：

1. 父亲传递一个属性给儿子
2. 儿子指明该属性是一个函数类型
3. 儿子执行自己的逻辑后，如果想传递给父亲，那么通过this.props.eventName()直接调用父方法
4. 父在该属性中，声明回调，有参数的，写参数

子传父demo

• 父组件中维护state的counter并展示。
• 两个子组件，分别对父组件中的数据进行加和减。

代码展示

父

子