React的props校验-默认值

1.函数组件的校验-默认值

//第二种方法直接在函数解构中赋值 （推荐使用）
function SonA ({ page=10 }) {
  return (
    <>
      <p>{page}</p>
    </>
  )

}
//第一种方法使用defaultProps （不推荐）
//SonA.defaultProps = {
// page: 10
//}

class App extends Component {

  render () {
    return (
      <div>

        <SonA > </SonA>

      </div>
    )
  }
}
           

2.类组件校验-默认值

class SonA extends Component {
//推荐使用静态类属性
  static defaultProps = {
    page: 10
  }

  render () {
    return (
      <div>
        默认值：{this.props.page}
      </div>
    )
  }
}

class App extends Component {

  render () {
    return (
      <div>

        <SonA ></SonA>

      </div>
    )
  }
}