有些容器组件需要定义state来更新和修改数据。 而子组件只能通过 props 来传递数据的原因:
- props是不可变的,不能被其所在的组件修改,从父组件传递进来的属性不会在组件内部更改;可以通过组件类的 defaultProps属性为props设置默认值。
- state可以根据与用户交互来改变,但只能在所在组件内部更改,或在外部调用setState函数对状态进行间接修改。
注意:
- 在rcc组件中运用props
this.props.data - 在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} /> ))}