PropTypes和DefaultTypes的应用

1. PropTypes

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Greeting extends Component {
  render() {
    const { name } = this.props;
    return (
      <h1>Hello, {name}</h1>
    );
  }
}

// PropTypes 对属性赋值的强校验，校验属性类型 ===> 可以要求、限制父组件给我这个子组件传值时的传值类型
Greeting.propTypes = {
  name: PropTypes.string
};

2. DefaultTypes

class Greeting extends Component {
  render() {
    return (
      const { name } = this.props;
      <h1>Hello, {name}</h1>
    );
  }
}

// DefaultProps 如果父组件没有向子组件传递对应的属性，子组件可以自己定义属性的默认值
Greeting.defaultProps = {
  name: 'Stranger'
};

  如果正在使用像transform-class-properties这样的Babel变换，则还可以在React组件类中将defaultProps声明为静态属性

  但是，该语法尚未最终确定，需要编译步骤才能在浏览器中工作, 如下：

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    const { name } = this.props;
    return (
      <div>Hello, {name}</div>
    )
  }
}