ES6 数据校验

ES6 class 数据校验

import React, { PropTypes } from 'react';

const propTypes = {
  // 验证不同类型的 JavaScript 变量
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,

  // 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组。
  optionalNode: React.PropTypes.node,

  // 可以是一个 ReactElement 类型
  optionalElement: PropTypes.element,

  // 可以是某个组件的实例
  optionalMessage: PropTypes.instanceOf(Message),

  // 可以是一组值中其中的一个
  optionalEmun: PropTypes.oneOf(['News', 'Photos']),

  // 可以是一组类型中的一个
  optionalUnion: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.string,
    PropTypes.instanceOf(Message)
  ]),

  // 指定类型组成的数组
  optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

  // 指定类型的属性构成的对象
  optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

  // 特定形状参数的对象
  optionalObjectWithShape: React.PropTypes.shape({
    color: React.PropTypes.string,
    fontSize: React.PropTypes.number
  }),

  // 以后任意类型加上 `isRequired` 来使 prop 不可空。
  requiredFunc: React.PropTypes.func.isRequired,

  // 不可空的任意类型
  requiredAny: React.PropTypes.any.isRequired,

  // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
  // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error('Validation failed!');
    }
  }

  // 可以在最后加一个 isRequired，表明这个属性是必须的，否则会返回一个错误
  requiredFunc: PropTypes.func.isRequired
};

class Profile extends React.Component {
  render() {
    return (
      <div className="profile-component">
        {/* this.pros 是传入的属性 */}
        <h1>my name is { this.props.name }</h1>
        <h2>my age is { this.props.age }</h2>
      </div>
    );
  }
}

Profile.propTypes = propTypes;
export default Profile;

将 propTypes 写在类中

import React, { PropTypes } from 'react';

export default class Profile extends React.Component {
  static get propTypes() {
    return {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired
    };
  }

  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.likeMe = this.likeMe.bind(this);
  }

  componentDidMount() {
    // 组件加载完成1秒之后，使 count 自动加1
    setTimeout(() => {
      this.likeMe();
    }, 1000);
  }

  likeMe() {
    let count = this.state.count;
    count += 1;
    console.log(count);
    this.setState({ count });
  }

  render() {
    return (
      <div className="profile-component">
        {/* this.pros 是传入的属性 */}
        <h1>my name is { this.props.name }</h1>
        <h2>my age is { this.props.age }</h2>
        <button onClick={this.likeMe}>Like Me</button>
        <h2>Like Me Count: { this.state.count }</h2>
      </div>
    );
  }
}