美文网首页前端开发
第10节 React propTypes defaultPr

第10节 React propTypes defaultPr

作者: 小沙坨 | 来源:发表于2019-05-26 22:30 被阅读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;

相关文章

网友评论

    本文标题:第10节 React propTypes defaultPr

    本文链接:https://www.haomeiwen.com/subject/qplqtctx.html