PropTypes 与 DefaultProps

最新推荐文章于 2025-05-23 10:37:31 发布

purple_lumpy

最新推荐文章于 2025-05-23 10:37:31 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： React基础内容学习记录

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/86429024

React基础内容学习记录专栏收录该内容

24 篇文章

订阅专栏

本文介绍React中如何使用PropTypes对组件属性进行类型校验，确保组件接收的props符合预期。同时，展示了如何定义props的默认值，增强组件的灵活性和健壮性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个组件都有自己的props 参数。这个参数，是从父组件接收到的一些属性。

本篇主要介绍，接收参数时，如何对参数的类型做校验；如何定义参数的默认值。

接收参数的类型的校验：

PropTypes

我们首先要引入 PropTypes，脚手架中自带了 prop-types包。然后使用如下。

import React, {
  Component
} from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component {

  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this)
  }
  handleDelete() {
    const {
      deleteItem,
      index
    } = this.props;
    deleteItem(index);
  }
  render() {
    const {
      content
    } = this.props;
    return (
      <div onClick={this.handleDelete}>{content}</div>
    )
  }
}

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

export default TodoItem

定义参数的默认值

DefaultProps

import React, {
  Component
} from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component {

  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this)
  }
  handleDelete() {
    const {
      deleteItem,
      index
    } = this.props;
    deleteItem(index);
  }
  render() {
    const {
      content,
      test
    } = this.props;
    return (
      <div onClick={this.handleDelete}>{test} - {content}</div>
    )
  }
}

TodoItem.propTypes = {
  test: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
  deleteItem: PropTypes.func,
  index: PropTypes.number
}

TodoItem.defaultProps = {
  test: "hello world"
}

export default TodoItem

官网介绍在这儿：【更详细】

https://reactjs.org/docs/typechecking-with-proptypes.html