React学习10.父子组件之间的参数约束_react 函数组件父组件未传值时设置子组件默认值

import React, { Component } from 'react';
import PropTypes from 'prop-types'

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: '我是Header state里的msg～～～～',
        }
    }
    render() {

        /**
         * defaultProps
         * 
         */
        return (<div>
            {this.props.title}-----{this.props.num}

            <br />
            <br />

            <button onClick={this.props.run}>header组件的按钮，调用父组件方法</button>
            <br />
            <br />

        </div>)

    }
}

// 绑定默认值，父组件调用子组件时，不传值
Header.defaultProps = {
    title: '标题'
}

// 父组件调用子组件时，约束传入值的类型
Header.propTypes = {
    title: PropTypes.string,
    num: PropTypes.number
}


export default Header;

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