11 React propTypes defaultProps

一、总结

/*
父组件给子组件传值

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

  propTypes:验证父组件传值的类型合法性
      1.引入  import PropTypes from 'prop-types';

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

  都是定义在子组件

  https://react.docschina.org/docs/typechecking-with-proptypes.html



*/

Home.js

import React, { Component } from "react";


import Header from "./Header.js";

class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      title: "首页组件",
    };
  }

  render() {
    return (
      <div>
        {/* <Header title={this.state.title} /> */}

        {/* <Header title={this.state.title}  num='123'/> */}

        <Header  num='123' />

        <br />
        <hr />
        <br />
        这是一个home组件的内容--父组件
      </div>
    );
  }
}

export default Home;

Header.js

import React, { Component } from "react";

import PropTypes from 'prop-types';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg:"我是一个头部组件的msg"
    };
  }


  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>

        
      </div>
    );
  }
}


//如果父组件调用子组件的时候不给子组件传值

//定义子组件的默认值--defaultProps
Header.defaultProps = {
  title:'标题'
}


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


export default Header;