React内的props应用

有些容器组件需要定义state来更新和修改数据。 而子组件只能通过 props 来传递数据的原因：

1. props是不可变的，不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；可以通过组件类的 defaultProps属性为props设置默认值。
2. state可以根据与用户交互来改变，但只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。

注意：

1. 在rcc组件中运用props
   this.props.data
2. 在rfc组件中运用props
   props.data

使用 Props

 

默认 Props

--有时候我们需要在子组件中设置个默认值，这时候需要用到defaultProps 属性

 

父传子

1.先声明一个父组件

 

2.声明两个子组件

 

传值拦截验证

--在某种情况下，我们要接收的数据需要进行修改下，比如传入的数据必须是字符串，等等，我们可以用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}
  />
))}