本文实例讲述了react PropTypes校验传递的值操作。分享给大家供大家参考，具体如下：校验传递的值：
import React, { Component, Fragment } from 'react';
import List from './List.js';

class Test extends Component {

constructor(props) {

super(props);

this.state={

inputValue:'aaa',

list:['睡觉','打游戏'],

}

// this.add=this.add.bind(this);

}


addList() {

this.setState({

list:[...this.state.list,this.state.inputValue],

inputValue:''

})

}


change(e) {

this.setState({

inputValue:e.target.value

})

}


delete(i) {

// console.log(i);

const list = this.state.list;

list.splice(i,1);

this.setState({

list:list

})

}


render() {

return (













    {

    this.state.list.map((v,i)=>{

    return(



    );

    })

    }





);

}
}
export default Test;


import React, { Component, Fragment } from 'react';
import List from './List.js';

class Test extends Component {

constructor(props) {

super(props);

this.state={

inputValue:'aaa',

list:['睡觉','打游戏'],

}

// this.add=this.add.bind(this);

}


addList() {

this.setState({

list:[...this.state.list,this.state.inputValue],

inputValue:''

})

}


change(e) {

this.setState({

inputValue:e.target.value

})

}


delete(i) {

// console.log(i);

const list = this.state.list;

list.splice(i,1);

this.setState({

list:list

})

}


render() {

return (













    {

    this.state.list.map((v,i)=>{

    return(



    );

    })

    }





);

}
}
export default Test;


import React, { Component } from 'react';
import PropTypes from 'prop-types';

class List extends Component {

constructor(props) {

super(props);

this.delete = this.delete.bind(this);

}


render() {

return (


onClick={this.delete}

>{this.props.name}{this.props.content}

);

}


delete=() => {

this.props.delete(this.props.index);

}
}

//传值校验

List.propTypes={

name:PropTypes.string.isRequired,

content:PropTypes.string,

index:PropTypes.number,

delete:PropTypes.func
}

//设置默认值：

List.defaultProps={

name:'张三'
}

export default List;


import React, { Component } from 'react';
import PropTypes from 'prop-types';

class List extends Component {

constructor(props) {

super(props);

this.delete = this.delete.bind(this);

}


render() {

return (


onClick={this.delete}

>{this.props.name}{this.props.content}

);

}


delete=() => {

this.props.delete(this.props.index);

}
}

//传值校验

List.propTypes={

name:PropTypes.string.isRequired,

content:PropTypes.string,

index:PropTypes.number,

delete:PropTypes.func
}

//设置默认值：

List.defaultProps={

name:'张三'
}

export default List;

希望本文所述对大家react程序设计有所帮助。