PropTypes 与 DefaultProps

Posted lolita-web

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了PropTypes 与 DefaultProps相关的知识,希望对你有一定的参考价值。

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;

 

以上是关于PropTypes 与 DefaultProps的主要内容,如果未能解决你的问题,请参考以下文章

[React] Define defaultProps and PropTypes as static methods in class component

可以将 propTypes 和 defaultProps 作为静态 props 放在 React 类中吗?

defaultProps和propTypes

P16:React高级-PropTypes校验传递值,使用默认值 defaultProps

React 使用 PropTypes 进行类型检查

React defaultProps null vs undefined