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