React Native 学习Props(属性)

组件属性,父组件传递给子组件时使用

传递属性

首先创建2个JS文件,PropsTest.js,APP.js
App.js

import React, { Component } from 'react';
import PropsTest from './PropsTest.';

export default class App extends Component<{}> {
  render() {
    return < PropsTest name="小明"/>
  }
}

PropsTest.js

import React, {Component} from 'react';
import {
  Text
} from 'react-native';
export default class PropsTest extends Component {
  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      姓名:{this.props.name}
    </Text>
  }
}

在 App.js 中我们使用了 < PropsTest/> 并且传递了一个值为“小明”的name属性，这样在PropsTest 中我们就可以获取到 name属性。

默认属性

import React, {Component} from 'react';
import {
  Text
} from 'react-native';
export default class PropsTest extends Component {
    //属性默认值
    static defaultProps = {
        name:'小红(默认)'
    };
  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      姓名:{this.props.name}
    </Text>
  }
}

通过static defaultProps = {}这种固定的格式来给一个组件添加默认属性。

属性检查

在设置之前我们需要先通过控制台导入 prop-types

yarn add prop-types

然后在PropsTest.js中import

import PropTypes from 'prop-types';

通过 static propTypes = {} 这种固定格式来设置属性的格式

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

如果传递类型不对模拟器会有黄色警告

延展操作符

延展操作符... ES6语法新特性
例如我们要传递一组属性
App.js

import React, { Component } from 'react';
import PropsTest from './PropsTest.';

export default class App extends Component<{}> {
  render() {
    var params={name:'小刚',age:44,sex:'女'};
    return < PropsTest {...params}/>
  }
}

这样在PropsTest.js就能直接使用属性了

解构赋值

从一组属性中获取指定属性
App.js

import React, { Component } from 'react';
import PropsTest from './PropsTest.';

export default class App extends Component<{}> {
  render() {
    var params={name:'小刚',age:44,sex:'女'};
    var {name,age} = params;
    return < PropsTest 
        nane={name}
        age={age}
    />
  }
}