react数据传递----props

4.4 三兄弟之二:props

就是定义在自定义组件标签上面的值,就是props。当props改变的时候,会引发Virtual DOM的改变,从而引发视图的重绘


app/Mycompo.js

react数据传递----props

app/App.js

react数据传递----props


如果父组件App,想往子组件Mycompo中传值,使用属性:

react数据传递----props


子组件Mycompo中就可以无脑使用this.props来枚举传入的属性:

react数据传递----props

如果需要在构造函数中使用这个值,此时系统会将props做为构造函数的第一个参数传入

react数据传递----props

在子组件中,props是只读的,不能修改props的值,如果想要修改,要用state来接收


props 属性可以被验证有效性:

$ npm install --save-dev prop-types

(1)首先引用验证的组件

react数据传递----props

(2)再定义组件需要传入的参数,这些都是语法规定

react数据传递----props这里有一个错,也就是Mycompo.propTypes的第一个p应该小写react数据传递----props

如果说你没有按给入的值传递,那么控制台就会报错。