React的类型检测PropTypes

来源:网络 文章列表 2019-10-08 8
随着应用的日益变大,保证组件的正确使用显得日益重要,为此引入React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告。

随着应用的日益变大,保证组件的正确使用显得日益重要,为此引入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')  
); 

 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接