RN的props使用详解

 

 

props是组件的属性,描述一个组件的,类似Android Attribute

如下实例,props从外部传递进来:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

export default class PropsComponent extends Component {
    render() {
        return propscomponent_getprops:{this.props.name}
    }
}

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PropsComponent from "./PropsComponent";

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component {
    render() {
          return (
            
                /**
                *引入,并传递参数name
                **／
                
            
        );
    }
}

这样在 PropsComponent中就能得到Appcomponent传递的属性name值;

如果在PropsComponent中引用了一个Appcomponent并未传递的属性,这个时候会怎样？

按照常规思路思考:
1.崩溃

2.显示为空
3.显示默认值

最终会是2:显示为空
如果我们想要显示默认值呢？那怎么办呢？

定义默认属性

 static defaultProps =
        {
            age: 24,
        }

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

export default class PropsComponent extends Component {
    static defaultProps =
        {
            age: 24,
        }

    render() {
        return propscomponent_getprops:{this.props.name}_{this.props.age}
    }
}

我们可以看到这里的属性都没有约束类型,很容易出问题
属性类型约束
在定义属性约束,需要用到一个类PropTypes
引入方式:
import PropTypes from "prop-types";

限定属性的约束

    static propTypes = {
        age: PropTypes.int,
    }

完整代码如下:
 

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PropTypes from "prop-types";

export default class PropsComponent extends Component {
    static defaultProps =
        {
            age: 24,
        }
    static propTypes = {
        age: PropTypes.int,
    }

    render() {
        return propscomponent_getprops:{this.props.name}_{this.props.age}
    }
}

在这里我们故意将age传递为字符串,会出现警告：

限制属性参数必须传递:
在propertypes有一个isRequired字段
 

 static propTypes = {
        age: PropTypes.int,
        name:PropTypes.string.isRequired,
    }

完整代码:
 

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PropTypes from "prop-types";

export default class PropsComponent extends Component {
    static defaultProps =
        {
            age: 24,
        }
    static propTypes = {
        age: PropTypes.int,
        name:PropTypes.string.isRequired,//必传
    }

    render() {
        return propscomponent_getprops:{this.props.name}_{this.props.age}
    }
}

这里我们限制了name为必传字段,我们不传递这个参数会有什么效果呢？
 

将会出现警告
 

传递一组属性

render() {
        var param={name:"李四",age:22};
        return (
            
                    
            
        );
    }

这种方式显得非常笨拙! es6提供一种简洁得方式:延展操作符合 {...xxx}

还有一种方式:结构赋值

render() {
        var param={name:"李四",age:22};
        var {name, age} = param;
        return (
            
             
             
        );
    }