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>
    );
  }