PropTypes

prop-types 包允許你向元件新增執行時型別檢查，以確保傳遞給元件的 props 的型別是正確的。例如，如果你沒有將 name 或 isYummy 道具傳遞給下面的元件，它將在開發模式中丟擲錯誤。在生產模式中，不進行道具型別檢查。定義 propTypes 可以使你的元件更具可讀性和可維護性。

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

import styles from './styles.js';

class Recipe extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    isYummy: PropTypes.bool.isRequired
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.name}</Text>
        {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
      </View>
    )
  }
}

AppRegistry.registerComponent('Recipe', () => Recipe);

// Using the component
<Recipe name="Pancakes" isYummy={true} />

多個 PropTypes

你也可以為一個道具提供多個 propTypes。例如，我正在採取的名稱道具也可以是一個物件，我可以把它寫成。

static propTypes = {
  name: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
  ])
}

兒童道具

還有一個名為 children 的特殊道具，它不會被傳遞出去

<Recipe children={something}/>

相反，你應該這樣做

<Recipe>
  <Text>Hello React Native</Text>
</Recipe>

那麼你可以在 Recipe 的渲染中做到這一點：

return (
  <View style={styles.container}>
    {this.props.children}
    {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
  </View>
)

你的 Recipe 會有一個 <Text> 元件說 Hello React Native，非常酷的嗡嗡聲？

而兒童的 propType 是

children: PropTypes.node