1.9 react props类型检查 defaultProps默认值 propTypes类型 isRequired必传参数

1 命令行yarn add prop-types -S

import React from 'react';
import ReactDom from 'react-dom';
import propsTypes from 'prop-types';

class App extends React.Component{
  
  static defaultProps = {
    arr:[],
  };

  static propTypes={
    num: propsTypes.number,
    title: propsTypes.string.isRequired//必传参数
  };//可以放在类内

  render(){
    return (
      <div>
        <h3>props类型检查{this.props.title}</h3>
        {this.props.arr}
        <hr/>
        {
          this.props.arr.map((val,index)=>(
            <li key={index}>{val}</li>
          ))
        }
        <hr/>
        {this.props.num+9}
      </div>
    )
  }
}

//默认值
/*App.defaultProps={//类属性|静态属性
  arr:[],
};

//类型约定
App.propTypes={
  num: propsTypes.number,
  title: propsTypes.string.isRequired//必传参数
};*//可以放在类外
ReactDom.render(
  <App  title2={"qq"} num={123}/>,
  document.querySelector("#root")
);