微客导航 » 文章资讯 » react PropTypes校验传递的值操作示例

react PropTypes校验传递的值操作示例

2023-07-26 14:11:04 428

本文实例讲述了reactPropTypes校验传递的值操作。分享给大家供大家参考，具体如下：

校验传递的值：

importReact,{Component,Fragment}from'react';
importListfrom'./List.js';

classTestextendsComponent{
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);
constlist=this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}

render(){
return(



添加


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

);
})
}


);
}
}
exportdefaultTest;

importReact,{Component}from'react';
importPropTypesfrom'prop-types';

classListextendsComponent{
constructor(props){
super(props);
this.delete=this.delete.bind(this);
}

render(){
return(
{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:'张三'
}

exportdefaultList;

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

返回顶部
3162201930
czq8825@qq.com

react PropTypes校验传递的值操作示例

热门推荐

随机推荐