浅谈React的类型检测-PropTypes

随着应用的日益变大，保证组件的正确使用显得日益重要，为此引入React.propTypes：react.PropTypes 提供很多验证器来验证传入数据的有效性，当向props传入无效数据时，JavaScript 控制台会抛出警告。

注意为了性能考虑，只在开发环境验证 propTypes。

一、声明props为指定的js基本类型，可传可不传。

1、React.PropTypes.array

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.array.isRequired    
    },    
    render: function() {    
        return (    
            <div>{this.props.name}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox name={["Alice", 30, true]} />,    
    document.getElementById('timeBox')    
);
2、React.PropTypes.bool

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        student: React.PropTypes.bool.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.student ? "Hello, react!" : "Sorry!"}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox student={true}  />,    
    document.getElementById('timeBox')    
);

注意：<div>{this.props.student}</div> 渲染不出包含true的div？？？

3、React.PropTypes.func

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        sayHello: React.PropTypes.func.isRequired    
    },    
    render: function() {  
        this.props.sayHello();  
        return (    
            <div>Hello, react!</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox sayHello={function sayHello() {console.log("Hello, react!");}}  />,    
    document.getElementById('timeBox')    
);
4、React.PropTypes.number

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        age: React.PropTypes.number.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.age}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox age={23}  />,    
    document.getElementById('timeBox')    
);
5、React.PropTypes.object

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        family: React.PropTypes.object.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.family.mother} & {this.props.family.father}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox family={{mother: "Alice", father: "Bruce"}} />,    
    document.getElementById('timeBox')    
);
6、React.PropTypes.string

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.string.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.name}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox name="Alice" />,    
    document.getElementById('timeBox')    
);
7、React.PropTypes.symbol
var MyBox = React.createClass({      
    propTypes: {      
        name: React.PropTypes.symbol.isRequired      
    },      
    render: function() {  
        var obj = {  
            [this.props.name]: "Alice"  
        }  
        return (      
            <div>{obj[this.props.name]}</div>      
        );      
    }      
});      
ReactDOM.render(      
    <MyBox name={Symbol()} />,      
    document.getElementById('timeBox')      
);

二、声明props为数字、字符串、DOM 元素或包含这些类型的数组或fragment。

React.PropTypes.node

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.node.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        [<span>Hello, react!</span>, 30, "Alice"]  
    </MyBox>,    
    document.getElementById('timeBox')    
);

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.node.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        {true}  
    </MyBox>,    
    document.getElementById('timeBox')    
);

三、声明props为React元素（原生HTML元素或React类）

React.PropTypes.element

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.element.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
var Children = React.createClass({    
    render: function() {  
        return (    
            <span>Hello</span>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        <div>  
            <Children />  
            <span> React</span>  
        </div>  
    </MyBox>,    
    document.getElementById('timeBox')    
);

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.element.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
var Children = React.createClass({    
    render: function() {  
        return (    
            <span>Hello</span>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        <Children />  
        <span> React</span>  
    </MyBox>,    
    document.getElementById('timeBox')    
);

四、声明props为某个指定的类

React.PropTypes.instanceOf(MyBox)

var MyBox = React.createClass({      
    propTypes: {      
        children: React.PropTypes.instanceOf(Array)     
    },      
    render: function() {  
        return (      
            <div>{this.props.children}</div>      
        );      
    }      
});        
ReactDOM.render(      
    <MyBox>  
        {[1, 2, 3]}  
    </MyBox>,      
    document.getElementById('timeBox')      
);

注意：指定的类不能是自定义的React类

五、声明props为某些指定值中的一个（用enum的方式）

React.PropTypes.oneOf(['Alice', 'Bruce'])

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.oneOf(['Alice', 'Bruce'])    
    },    
    render: function() {  
        return (    
            <div>{this.props.name}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox name="Cindy" />,    
    document.getElementById('timeBox')    
);

六、声明props为某些类型中的一个

React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, ...])

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        prop: React.PropTypes.oneOfType([  
            React.PropTypes.string,  
            React.PropTypes.number  
        ])   
    },    
    render: function() {  
        return (    
            <div>{this.props.prop}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox prop={true} />,    
    document.getElementById('timeBox')    
);

七、声明props为指定类型组成的数组

React.PropTypes.arrayOf(React.PropTypes.number)

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        prop: React.PropTypes.arrayOf(React.PropTypes.number)  
    },  
    render: function() {  
        return (    
            <div>{this.props.prop}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox prop={["Alice", 23, true]} />,    
    document.getElementById('timeBox')    
);

八、声明props为指定类型的属性构成的对象

React.PropTypes.objectOf(React.PropTypes.number)

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        family: React.PropTypes.objectOf(React.PropTypes.string)    
    },    
    render: function() {  
        return (    
            <div>{this.props.family.mother} & {this.props.family.father}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox family={{mother: "Alice", age: 23}} />,    
    document.getElementById('timeBox')    
);

九、声明props为特定形状参数的对象

React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
})

十、声明props为必须的某类型

React.PropTypes.*.isRequired

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.string.isRequired    
    },    
    render: function() {  
        return (    
            <div>Hello, react!</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox />,    
    document.getElementById('timeBox')    
);

十一、声明props为必须的任意类型

React.PropTypes.any.isRequired

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.any.isRequired    
    },    
    render: function() {  
        return (    
            <div>Hello, react!</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox />,    
    document.getElementById('timeBox')    
);

参考：http://blog.csdn.net/zhouziyu2011/article/details/70842310

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • React特性精华
    以下内容是我在学习和研究React时，对React的特性、重点和注意事项的提取、精练和总结，可以做为React特性...
    科研者阅读 8,319评论 2赞 21
  • Entry to React
    原教程内容详见精益 React 学习指南，这只是我在学习过程中的一些阅读笔记，个人觉得该教程讲解深入浅出，比目前大...
    leonaxiong阅读 2,879评论 1赞 18
  • React文档阅读
    自己最近的项目是基于react的，于是读了一遍react的文档，做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,545评论 1赞 10
  • React 高级指导 笔记
    深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,117评论 2赞 35
  • 谈谈从0开始快速学习React Native(一)
    React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知...
    亓凡阅读 1,528评论 1赞 4