随着应用的日益变大,保证组件的正确使用显得日益重要,为此引入React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告。
注意为了性能考虑,只在开发环境验证 propTypes。
1、声明props为指定的JS基本类型,可传可不传。
1) React.PropTypes.array
正确示范:
[javascript] view plain copy
- 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
正确示范:
[javascript] view plain copy
- 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
正确示范:
[javascript] view plain copy
- 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
正确示范:
[javascript] view plain copy
- 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
正确示范:
[javascript] view plain copy
- 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
正确示范:
[javascript] view plain copy
- 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
[javascript] view plain copy
- 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
正确示范:
[javascript] view plain copy
- 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')
- );
错误示范:
[javascript] view plain copy
- 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
正确示范:
[javascript] view plain copy
- 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')
- );
错误示范:
[javascript] view plain copy
- 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)
[javascript] view plain copy
- 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'])
错误示范:
[javascript] view plain copy
- 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, ...])
错误示范:
[javascript] view plain copy
- 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)
错误示范:
[javascript] view plain copy
- 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)
错误示范:
[javascript] view plain copy
- 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
错误示范:
[javascript] view plain copy
- 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
错误示范:
[javascript] view plain copy
- var MyBox = React.createClass({
- propTypes: {
- name: React.PropTypes.any.isRequired
- },
- render: function() {
- return (
- <div>Hello, react!</div>
- );
- }
- });
- ReactDOM.render(
- <MyBox />,
- document.getElementById('timeBox')
- );