004_React 父子组件之间传值和调函数
- 父组件向子组件传值
在父组件中直接将值写入组件标签参数中,然后写入数据即可
而子组件中接收此参数直接使用this.props.参数名 即可拿到父组件传递的参数。
例子:
相比于Vue直接在实例当中的props字段中限定传入参数的类型,React需要引入额外的拓展 prop-types
对于传入期望类型不符的参数则会报错
注意,定义参数类型的对象要定义在实例外面
如果想要参数不传递就报错,这就需要使用
isRequired
关键字了,它表示必须进行传递,如果不传递就报错。
子组件调用父组件的函数
与Vue的$emit不同的是,React的子组件调用父组件的方式同样是使用this.props.函数名,
在子组件中通过this.props.函数名(参数)调用在父组件中写在子组件标签中的函数即可,注意父组件的函数同样要绑定this
例子