浅谈React的类型检测——PropTypes

你的名字 2022-06-17 13:27 201阅读 0赞

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

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

1、声明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')    
    );

2、声明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')  
    );

3、声明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')  
    );

4、声明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类

5、声明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')  
    );

6、声明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')  
    );

7、声明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')  
    );

8、声明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')  
    );

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

React.PropTypes.shape(\{

color: React.PropTypes.string,

fontSize: React.PropTypes.number

\})

10、声明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')  
    );

11、声明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')  
    );

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 231 阅读

相关浅谈React的类型检测——PropTypes

随着应用的日益变大，保证组件的正确使用显得日益重要，为此引入React.propTypes：React.PropTypes 提供很多验证器来验证传入数据的有效性，当向props

你的名字/ 2022年06月17日 13:27/ 0 赞/ 202 阅读

相关浅谈React的createFactory()方法

1、作用：创建React组件实例。 2、实现：只需创建一个带type参数的createElement的绑定函数即可。 React.createFa

水深无声/ 2022年06月17日 12:36/ 0 赞/ 267 阅读

相关浅谈React.createElement()方法

document有createElement()方法，React也有createElement()方法，下面就来介绍React的createElement()方法。

超、凢脫俗/ 2022年06月17日 09:42/ 0 赞/ 796 阅读

相关浅谈React实现todolist

todoList.html： <!DOCTYPE html> <html> <head> <link rel="styleshee

爱被打了一巴掌/ 2022年06月17日 09:18/ 0 赞/ 204 阅读

相关浅谈React Router入门

1、Router组件 1) history属性用于监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。 history属

短命女/ 2022年06月15日 04:14/ 0 赞/ 298 阅读

相关 React中静态类型校验-PropTypes学习

PropTypes学习 [官方网址详细说明][Link 1] 1.基本说明 PropTypes定义为组件类自身的属性，用以定义prop的类型。在开发模式下，当提供一

川长思鸟来/ 2022年05月30日 06:09/ 0 赞/ 196 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 291 阅读

相关 React的PropTypes和DefaultProps

文章目录 propTypes PropTypes的验证器基本的JS类型任何可以被渲染的元素

快来打我*/ 2021年11月27日 06:02/ 0 赞/ 320 阅读

相关 React官网学习实践 - 使用PropTypes检查类型

随着应用日渐庞大，你可以通过类型检查捕获大量错误。对于某些应用来说，你还可以使用 [Flow][] 或 [TypeScript][] 这样的 JavsScript 扩展来对整

我会带着你远行/ 2021年06月24日 16:11/ 0 赞/ 381 阅读