进击react @ PropTypes

新的一个微信项目，打算采用react做spa开发(单页应用)，本来之前对它也是比较感兴趣了，就来分享一些学习过程中的磕磕绊绊，希望可以给大家带来一些灵感。刚开始为过程中的细节描述，等项目完成，再来分享一些具体的思路（毕竟虫子我刚开始）

React中PropTypes的使用方法
在react-redux官网提供的实例TodoList中，会经常看到这样的代码，根据字面意思，相信大家都是知道的，但是还是有提一下的必要

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React,{PropTypes} from 'react'
const Link = ({active,children,onClick}) => {
    if(active){
        return <span>{children}</span>
    }
    return (
        <a href="#"
           onclick= {e => {
               e.preventDefault();
               onClick();
           }}
        >
            {children}
        </a>
    )
};
Link.propTypes = {
    active: PropTypes.bool.isRequired,
    children: PropTypes.node.isRequired,
    onClick: PropTypes.func.isRequired
};
export default Link

从字面的来看，类型，必须的，其余的就是中间的那几个东西。这些是用来规范组件的类型，如果没有引入对应的类型，在控制台是有警告提示
下面是PropTypes的种类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
React.PropTypes.array           // 数组

React.PropTypes.bool.isRequired // Boolean 且必要。

React.PropTypes.func            // 函数

React.PropTypes.number          // 数字

React.PropTypes.object          // 对象

React.PropTypes.string          // 字符串

React.PropTypes.node            // 任何类型的: numbers, strings, elements 或者任何这种类型的数组

React.PropTypes.element         // React 元素

React.PropTypes.instanceOf(XXX) // 某种XXX类型的对象

React.PropTypes.oneOf(['foo', 'bar']) // 其中一个字符串

React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 其中一种格式类型

React.PropTypes.arrayOf(React.PropTypes.string)  // 某种类型的数组（字符串类型）

React.PropTypes.objectOf(React.PropTypes.string) // 具有某种属性类型的对象（字符串类型）

React.PropTypes.shape({                          // 是否符合指定格式的

  color: React.PropTypes.string,
  fontSize: React.PropTypes.number
});
React.PropTypes.any.isRequired  // 可以是任何格式，且必要。