004_React 父子组件之间传值和调函数

• 父组件向子组件传值 

在父组件中直接将值写入组件标签参数中，然后写入数据即可

而子组件中接收此参数直接使用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

例子