使用 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}
  />
))}