react native中props的使用

react native中props的使用

一、props的使用

1：父组件传递的方式

在子组件中可以用this.props访问到父组件传递的值

<View>
        <Text>
                {this.props.name}
         </Text>

 </View>

父组件定义传递的值　

<MyComponent name='小明'/>

2：子组件定义默认props（父组件未传值的情况使用）

static defaultProps = {
        name: '小红'
}

　　

二、props类型检查

为了其他组件传递值得时候，保持类型的准确，需要进行类型检查。

首先导入PropTypes

import propTypes from 'prop-types'

注意：propTypes已经从react中移除，需要单独导入。npm install prop-types下载依赖包。propTypes开头的p不需要大写。

然后定义类型检查

static propTypes = {
        name: propTypes.number,
}

1：属性是指定的 JavaScript 基本类型：

属性: PropTypes.array,
属性: PropTypes.bool,
属性: PropTypes.func,
属性: PropTypes.number,
属性: PropTypes.object,
属性: PropTypes.string,

2：要求属性是可渲染节点

属性: PropTypes.node,

3：要求属性是某个 React 元素

属性: PropTypes.element

4：要求属性是某个指定类的实例

属性: PropTypes.instanceOf(NameOfAClass),

5：要求属性取值为特定的几个值

属性: PropTypes.oneOf(['value1', 'value2'])

6：要求属性可以为指定类型中的任意一个

属性: PropTypes.oneOfType([
  PropTypes.bool,
  PropTypes.number,
  PropTypes.instanceOf(NameOfAClass),
])

7：要求属性为指定类型的数组

属性: PropTypes.arrayOf(PropTypes.number)

8：要求属性是一个有特定成员变量的对象

属性: PropTypes.objectOf(PropTypes.number)

9：要求属性是一个指定构成方式的对象

属性: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number,
}),

10：属性可以是任意类型

属性: PropTypes.any

11：上面描述的 10 种语法，都可以通过在后面加上 isRequired 声明它是必需的。

属性: PropTypes.array.isRequired,
属性: PropTypes.any.isRequired,
属性: PropTypes.instanceOf(NameOfAClass).isRequired,

　　

三、延展操作符和解构赋值

1：延展操作符

如果父组件需要传递多个参数，而这些参数都存在一个对象里，我们可以使用延展操作符的方式传值。

render() {
    let params = {
      name : '小红',
      age: 11
    }
    return (
      <View>
        <MyComponent {...params}/>

      </View>
    );
  }

2：解构赋值

当我们只需要取对象中部分属性传递

render() {
    let params = {
      name : '小红',
      age: 12,
      sex: '男'
    }
    let {name, age} = params
    return (
      <View>
        <MyComponent name={name} age={age}/>
      </View>
    );
  }