React学习11----父组件给子组件传值时defaultProps和propTypes使用_prop-types defaultprop

都是定义在子组件里面
defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值

propTypes：验证父组件传值的类型合法性

        1、引入import PropTypes from 'prop-types';

        2、类.propTypes = {
            name: PropTypes.string
        };
1
2
3
4
5

参考：
https://reactjs.org/docs/typechecking-with-proptypes.html

例子：项目结构：

父组件:Father.js

import React from 'react';
import Son from "./Son";

/**
 * 父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
 * 在这里Father.js 是父组件，Son.js是子组件
 *
 * 把父组件的对象传给子组件
 */

class Father  extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            title:'父组件的标题',
            num:123456,
        }
    }
    getData=()=>{
        alert('我是父组件的getData方法')
    }
    setData=()=>{
        alert('我是父组件的setData方法')
    }
    render() {
        return (
            <div>
                {/* 父组件黑子组件传值 */}
                {/*<Son  num = {this.state.num}/>*/}
                <Son title = {this.state.title} num = {this.state.num}/>
            </div>

        );
    }
}
export default Father;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

子组件：Son.js

import React from 'react';
import PropTypes from 'prop-types';
/*
父组件给子组件传值：


    defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值

    propTypes：验证父组件传值的类型合法性

            1、引入import PropTypes from 'prop-types';

            2、类.propTypes = {
                name: PropTypes.string
            };


    都是定义在子组件里面


https://reactjs.org/docs/typechecking-with-proptypes.html


*/

class Son extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name : '子组件',
        }
    }

    render() {
        return(

            <div>
                {/* 接收父组件传过来的属性 */}
                {this.props.title}
                <br/><br/>
                {this.props.num}
                <br/><br/>

            </div>
        );
    }
}//class

//defaultProps   如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值
//父组件中 <Son  num = {this.state.num}/> 没有定义 title 属性传值时，设置默认值
Son.defaultProps={

    title:'标题'
}

//同行propTypes定义父组件给子组件传值的类型
//指定 num 是 number 类型，父类中传别的类型的值，浏览器会有警告
Son.propTypes={

    num:PropTypes.number
}
export default Son;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

ok完了
源码下载：
https://download.csdn.net/download/zhaihaohao1/10980372
rdemo11