使用 Props
image.png
默认 Props
--有时候我们需要在子组件中设置个默认值，这时候需要用到defaultProps 属性
image.png
父传子
1.先声明一个父组件
image.png
2.声明两个子组件
image.png
传值拦截验证
--在某种情况下，我们要接收的数据需要进行修改下，比如传入的数据必须是字符串，等等，我们可以用Props 验证使用 propTypes，当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意：前提是你必须引入，或者用脚手架了的话要先导入才能用
import PropTypes from 'prop-types'
// 子组件
class Child extends Component{
render(){
return (
<div>{this.props.aaa}
<hr/>
{this.props.bbb}
<hr/>
{this.props.ccc}
<hr/>
{this.props.ddd}
<hr/>
</div>
)
}
}
//对传过来的props进行验证
//验证类型和是否必传
Child.propTypes = {
// 传入aaa的类型必须为number（不传不会报错，仅仅是限制已传入的参数类型）
aaa:PropTypes.number,
//必须传入bbb
bbb:PropTypes.isRequired,
//必须传入ccc且类型必须为
ccc:PropTypes.string.isRequired
}
//设置默认值,顺便把上面的默认提一下
Child.defaultProps = {
ddd:"默认值"
}
----自己学习补充
属性名采用 camelCase 风格：
<Foo
userName="hello"
phoneNumber={12345678}
/>
如果属性为 true ，可以直接省略：
// bad
<Foo hidden={true} />
// good
<Foo hidden />
数组中或者遍历中输出相同的 React 组件，属性 key 必需，且不要使用 index 作为 key ，推荐使用唯一ID。
{todos.map(todo => (
<Todo
{...todo}
key={todo.id}
/>
))}
