PropTypes 与 DefaultProps

Posted 2021-01-16 lolita-web

PropTypes 与 DefaultProps

 1 import React ,{ Component } from ‘react‘;
 2 import PropTypes from ‘prop-types‘;
 3 class TodoItem extends Component{
 4     constructor(props){
 5         super(props);
 6         this.handleclick=this.handleclick.bind(this);
 7     }
 8     render(){
 9         const { item,test }=this.props;
10         return (
11             <div>
12                 <li 
13                 onClick={this.handleclick}
14                    // /*dangerouslySetInnerhtml={{__html:item,test}}*/
15                 >{item}-{test}</li>
16             </div>
17             )
18     }
19     handleclick(){
20         const { deleteItem,index }=this.props;
21         deleteItem(index);
22     }
23 }
24 TodoItem.propTypes={    // 要求父组件传递给子组件相关的数据参数类型限制
25     test:PropTypes.string.isRequired,
26     item:PropTypes.arrayOf(PropTypes.number,PropTypes.string), //arrayOf指的传递参数要么是数字，要么是字符串
27     deleteItem:PropTypes.func,
28     index:PropTypes.number 
29 }
30 TodoItem.defaultProps={ // 默认传递参数值
31     test:‘hello world‘
32 }
33 export default TodoItem;