前端开发

第10节 React propTypes defaultPr

2019-05-26  本文已影响0人  小沙坨

一、父组件给子组件传值

1.1 defaultProps

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

1.2 propTypes

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

(1)引入import PropTypes from 'prop-types';
(2)类.propTypes = {
                name: PropTypes.string
            };

1.3 注意事项

defaultProps、propTypes两者都是定义在子组件里面。

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

二、完整DEMO

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"我是一个头部组件"
         };
    }
    render() {
        return (
            <div>
                <h2>---{this.props.title}--- {this.props.num}</h2>
            </div>
        );
    }
}

//defaultProps   
//如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值
Header.defaultProps={
    title:'标题'
}

//同行propTypes定义父组件给子组件传值的类型
Header.propTypes={
    num:PropTypes.number
}

export default Header;
上一篇 下一篇

猜你喜欢

热点阅读