react-prop-types

npm add prop-types
import PropTypes from ‘prop-types’

propTypes,defaultProps 这两个词都是 react规定的
propTypes 用来设置 props规则
defaultProps 用来设置 默认值

static propTypes = {
    // 是用来设置 props的规则
    n: PropTypes.number.isRequired,   // n 必传 而且必须是一个数字
    aaa: PropTypes.func
}
static defaultProps = {
    aaa: function () { console.log(999) }
}

import React from 'react';
import reactDOM from 'react-dom';

// npm add prop-types
import PropTypes from 'prop-types';

/*
    propTypes,defaultProps 这两个词都是 react规定的
    propTypes 用来设置 props规则
    defaultProps 用来设置 默认值
*/

class Button extends React.Component {
    static propTypes = {
        // 是用来设置 props的规则
        n: PropTypes.number.isRequired,   // n 必传 而且必须是一个数字
        aaa: PropTypes.func
    }
    static defaultProps = {
        aaa: function () { console.log(999) }
    }
    render() {
        let { aaa, n } = this.props
        return <>
            <button onClick={() => { aaa(n + 1) }}>+</button>
            <button onClick={() => { aaa(n - 1) }}>-</button>
        </>
    }
}

class Parent extends React.Component {
    state = {
        age: 100
    }
    myc(n) {
        this.setState({
            age: n
        })
    }
    render() {
        let { age } = this.state
        return <div className="parent">
            <h1>{age}</h1>
            <Button aaa={(n) => { this.myc(n) }} n={age} />
            <Button n={age} />
        </div>;
    }
}

reactDOM.render(<>
    <Parent />
</>, document.querySelector('#root'))