浅谈React的类型检测——PropTypes

来源：互联网发布：神机妙算软件定额安装编辑：程序博客网时间：2024/05/20 21:47

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

1 1