ES6 数据校验
2023-09-27 14:28:17 时间
// 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组。
optionalNode: React.PropTypes.node,
// 可以是一个 ReactElement 类型
optionalElement: PropTypes.element,
// 可以是某个组件的实例
optionalMessage: PropTypes.instanceOf(Message),
// 可以是一组值中其中的一个
optionalEmun: PropTypes.oneOf([News, Photos]),
// 可以是一组类型中的一个
optionalUnion: PropTypes.oneOfType([
PropTypes.array,
PropTypes.string,
PropTypes.instanceOf(Message)
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定形状参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
// 以后任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
// 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(Validation failed!);
// 可以在最后加一个 isRequired，表明这个属性是必须的，否则会返回一个错误
requiredFunc: PropTypes.func.isRequired
class Profile extends React.Component {
render() {
return (
div className="profile-component"
{/* this.pros 是传入的属性 */}
h1 my name is { this.props.name } /h1
h2 my age is { this.props.age } /h2
/div
Profile.propTypes = propTypes;
export default Profile;
将 propTypes 写在类中
import React, { PropTypes } from react;
export default class Profile extends React.Component {
static get propTypes() {
return {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
constructor(props) {
super(props);
this.state = { count: 0 };
this.likeMe = this.likeMe.bind(this);
componentDidMount() {
// 组件加载完成1秒之后，使 count 自动加1
setTimeout(() = {
this.likeMe();
}, 1000);
likeMe() {
let count = this.state.count;
count += 1;
console.log(count);
this.setState({ count });
render() {
return (
div className="profile-component"
{/* this.pros 是传入的属性 */}
h1 my name is { this.props.name } /h1
h2 my age is { this.props.age } /h2
button this.likeMe} Like Me /button
h2 Like Me Count: { this.state.count } /h2
/div
}