ReactNative之props基础用法+究极体验

版权声明:乐于分享,学海无涯。转载请标明出处。 https://blog.csdn.net/sinat_30949835/article/details/79961562
注:本教程针对于有过React/ReactNative开发经验的人群。
一:基本使用
创建一个子组件。
export default class ItemProps extends Component {

导入这个组件并在render中使用。
在另一个组件中导入。
import ItemProps from '../pages/ItemProps';
export default class PropsPage extends Component {
使用:
let params = {
name : '小明',
phone : '1008611'
}
...
<ItemProps {...params} {...this.state} t = {this.state.text}/>

注:直接传参,新语法传参,传函数方法都是可以的,传父类方法子类调用更是可以的。

在item中使用:
render() {
let { name,phone,text,nullnull,t } = this.props;
直接接收使用就可以了

二:默认参数
用static修饰的defaultProps用来设置默认的props,就是在未拿到props之前显示的内容,不然未拿到值会显示und...
static defaultProps={ name: 'XiaoHong' }

三:参数使用state

在父类中改变这个state,子类中使用了this.state也会跟着改变。

四:约束检查

意思是在子组件设置约束,父组件向子组件传值时,会进行类型判断,如果异常会向控制台抛出异常信息,页面上也会有异常警告弹出。是黄色的异常,并非错误信息。
React.PropTypes自React V15.5起已经被移除了,这个在正式版本中是没有用的,反而会拖慢程序。
在开发过程中,这个还是很有用的。比如合作开发,另一个人不会用这个子组件可以一目了然。
React V15.5之后想使用的话需要导入prop-types包(npm install --save prop-types)

作用可以设定类型和是否必传(isRequired为必传)
/**
* 在这个约束检查里 phone要求number但是我传的是string,所以控制台会抛出类型异常。
*
*/
//React.PropTypes自 React v15.5 起就被移除了,因为约束检查在正式版本拖性能后腿。所以使用prop-types库来进行替换
//导入 npm install --save prop-types
//约束检查 isRequired参数是必选的意思
static propTypes = {
name: PropTypes.string.isRequired,
phone: PropTypes.number,
}

注:正式版本中,一定要记得注视调这些代码。

五:基于ES6的延伸操作符

不在赘述,基本使用中有详细的用法。
props支持延伸操作符传值
...params
props 解构
var {name, age} = params;


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页