React的props校验-默认值

最新推荐文章于 2024-05-20 12:07:46 发布

前端小趴菜

最新推荐文章于 2024-05-20 12:07:46 发布

阅读量935

点赞数

分类专栏： react.js 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xjx0121/article/details/124901233

版权

react.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>
    )
  }
}