React进阶 - 11( 说一说 PropTypes 和 DefaultProps )

本章内容

目录

截止到上一节的内容,我们使用了一个 TodoList的案例,大概了解了 React的一些入门知识。从本节内容开始,我们将进入React进阶知识的学习

PropTypes

  • 在组件拆分时,我们知道每个组件都有自己的 props,这个参数是从父组件那里接收的一些数据。

  • 那么有个疑问,子组件在接受参数的时候,怎么对这些参数"类型"做校验呢,又如何定义参数的"默认值"呢?

  • 打开之前工程里的 TodoItem.js组件,可以看到其父组件传过来的参数都有属于自己的"类型"

  • React可以使用 PropTypes对传递的属性进行"类型"强校验

js 复制代码
import React, { Component } from 'react'
import PropTypes from 'prop-types' // 1、引入 PropTypes


class TodoItem extends Component {
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }
  render () {
    const { content } = this.props
    return (
      <div onClick={this.handleClick}>
        {content}
      </div>
    )
  }

  handleClick() {
    const { deleteFn, index } = this.props
    deleteFn(index)
  }
}

// 2、使用 PropTypes 对属性进行强校验
TodoItem.propTypes = {
  content: PropTypes.string,
  index: PropTypes.number,
  deleteFn: PropTypes.func
}

export default TodoItem
  • 运行代码后,发现正常运行,没有报错。

  • 注意的是,如果你在子组件将 index的类型设置为 string, 界面将会出现一个"警告",因为父组件那边传递的类型是 number类型,跟设定的不符

js 复制代码
import React, { Component } from 'react'
import PropTypes from 'prop-types' // 1、引入 PropTypes


class TodoItem extends Component {
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }
  render () {
    const { content } = this.props
    return (
      <div onClick={this.handleClick}>
        {content}
      </div>
    )
  }

  handleClick() {
    const { deleteFn, index } = this.props
    deleteFn(index)
  }
}

// 2、使用 PropTypes 对属性进行强校验
TodoItem.propTypes = {
  content: PropTypes.string,
  index: PropTypes.string, // 如果这里设置为 string,那么界面会出现警告
  deleteFn: PropTypes.func
}

export default TodoItem

DefaultProps

  • 接着上面的代码,现在有个新需求: 假设在子组件中,子组件必须要求父组件给它传递一个"属性"(例如:title), 但是父组件由于某些原因,不能传递这个属性,此时应该怎么解决呢?
js 复制代码
import React, { Component } from 'react'
import PropTypes from 'prop-types' 

class TodoItem extends Component {
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }
  render () {
    // 1、子组件要求父组件给它传递一个 title 属性
    const { content, title } = this.props
    return (
      <div onClick={this.handleClick}>
        {/* 2、并且将 title 属性显示在界面上 */}
        {title}---{content}
      </div>
    )
  }

  handleClick() {
    const { deleteFn, index } = this.props
    deleteFn(index)
  }
}

TodoItem.propTypes = {
  title: PropTypes.string.isRequired, // 3、要求父组件必须传递一个 title 属性
  content: PropTypes.string,
  index: PropTypes.number,
  deleteFn: PropTypes.func
}

export default TodoItem
  • 运行一下界面,发现控制台出现了一个警告(因为父组件确实没有传递这个 title属性,但是子组件他又必须要)。

  • 要解决上面的警告,那使用 defaultPropstitle属性设置一个"默认值"

js 复制代码
import React, { Component } from 'react'
import PropTypes from 'prop-types' 

class TodoItem extends Component {
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }
  render () {
    const { content, title } = this.props
    return (
      <div onClick={this.handleClick}>
        {title}---{content}
      </div>
    )
  }

  handleClick() {
    const { deleteFn, index } = this.props
    deleteFn(index)
  }
}

TodoItem.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
  index: PropTypes.number,
  deleteFn: PropTypes.func
}

TodoItem.defaultProps = {
  title: '我是子组件' // 给 title 设置一个"默认值"
}

export default TodoItem
  • 设置完"默认值"后,再次运行界面,发现一切正常

到此,本章内容结束!

相关推荐
web守墓人44 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架