- 父组件向子组件传值
在父组件中直接将值写入组件标签参数中,然后写入数据即可
而子组件中接收此参数直接使用this.props.参数名 即可拿到父组件传递的参数。
例子:
相比于Vue直接在实例当中的props字段中限定传入参数的类型,React需要引入额外的拓展 prop-types
对于传入期望类型不符的参数则会报错
注意,定义参数类型的对象要定义在实例外面
如果想要参数不传递就报错,这就需要使用
isRequired
关键字了,它表示必须进行传递,如果不传递就报错。
PropTypes类型
React.PropTypes.array // 队列 React.PropTypes.bool.isRequired // Boolean 且必须 React.PropTypes.func // 函数 React.PropTypes.number // 数字 React.PropTypes.object // 对象 React.PropTypes.string // 字符串 React.PropTypes.node // 任何类型的: numbers, strings, elements 或者数组 React.PropTypes.element // React 元素 React.PropTypes.instanceOf(XXX) // 某种XXX类型的对象 React.PropTypes.oneOf(['foo', 'bar']) // 其中的一个字符串 React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 其中的一种类型 React.PropTypes.arrayOf(React.PropTypes.string) // 某种类型的数组(字符串) React.PropTypes.objectOf(React.PropTypes.string) // 元素是字符串的对象 React.PropTypes.shape({ // 是否符合指定格式的对象 color: React.PropTypes.string, fontSize: React.PropTypes.number }); React.PropTypes.any.isRequired // 可以是任何格式,且必要。
子组件调用父组件的函数
与Vue的$emit不同的是,React的子组件调用父组件的方式同样是使用this.props.函数名,
在子组件中通过this.props.函数名(参数)调用在父组件中写在子组件标签中的函数即可,注意父组件的函数同样要绑定this
例子