React propTypes 与 defaultProps

周大胖子

1. import React, { Fragment, Component } from 'react';
   
2. import PropTypes from 'prop-types';
   
3. 
   
4. class ToDoItem extends Component
   
5. {
   
6. 
   
7.     // 父子组件传值
   
8.     // 组件之间的传值靠 属性
   
9.     // 第一步 在 父组件【其实不是负的也对啊】 <Myapp  mydata={dsss} /> 上绑定 属性
   
10.     // 第二步 在 组件内部 使用 this.props.mydata 来接受 传递过来的值 与 方法
    
11. 
    
12.     // 里面的this 指向问题
    
13.     // 先说一个简写  在 constructor 中 把 函数指定了 this 则 下面不用指定
    
14.     // 再说一个 父级this 的绑定问题 ； 因为方法是用 属性传过来的 .直接在父级页面 bind(this) 即可把 子页面接收到的方法 指向调整为this
    
15. 
    
16.     constructor(props)
    
17.     {
    
18.         super(props);
    
19.         this.delFunction = this.delFunction.bind(this); // 和在行间写一样
    
20.     }
    
21. 
    
22.     render(){
    
23.         let {delF, content,index} = this.props;
    
24.         return (
    
25.             <Fragment>
    
26.                 <li onClick={this.delFunction} >
    
27.                     {content }  
    
28.                 </li>
    
29.               
    
30.             </Fragment>
    
31.         );
    
32.     }
    
33. 
    
34. 
    
35.     delFunction()
    
36.     {
    
37.         let {delF, content,index} = this.props;
    
38. 
    
39.         // alert(this.props.index )
    
40.         // 花样传值
    
41.         delF( index )
    
42.     }
    
43. 
    
44. }
    
45. 
    
46. // 这玩意是用于规定 组件传过来的 值的类型的  必须写在 类的 外面
    
47. // string 字符串； func 函数 ；number 数字 ；还有数组-对象之类 还可以 即使字符串又是数字
    
48. // 如果 后面接了 .isRequired  表示是必须传递过来的值 例如 PropTypes.string.isRequired
    
49. ToDoItem.propTypes ={
    
50.     content:PropTypes.string,
    
51.     delF:PropTypes.func
    
52. }
    
53. // 默认值
    
54. ToDoItem.defaultProps = {
    
55.     content:'sdyu'
    
56. }
    
57. 
    
58. 
    
59. export default ToDoItem;

复制代码