React PropTypes

Cách sử dụng PropTypes để đặt loại giá đỡ cần thiết

Vì JavaScript là một ngôn ngữ được nhập động, chúng tôi không thực sự có cách nào để thực thi kiểu của một biến tại thời điểm biên dịch và nếu chúng tôi chuyển các kiểu không hợp lệ, chúng sẽ bị lỗi trong thời gian chạy hoặc đưa ra kết quả kỳ lạ nếu các kiểu tương thích nhưng không. những gì chúng tôi mong đợi.

Dòng chảy vàTypeScriptgiúp ích rất nhiều, nhưng React có một cách để trợ giúp trực tiếp với các loại đạo cụ và thậm chí trước khi chạy mã, các công cụ của chúng tôi (trình chỉnh sửa, linters) có thể phát hiện khi chúng tôi chuyển các giá trị sai:

import PropTypes from 'prop-types'
import React from 'react'

class BlogPostExcerpt extends Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) } }

BlogPostExcerpt.propTypes = { title: PropTypes.string, description: PropTypes.string }

export default BlogPostExcerpt

Chúng ta có thể sử dụng những loại nào

Đây là những kiểu cơ bản mà chúng ta có thể chấp nhận:

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string
  • PropTypes.symbol

Chúng tôi có thể chấp nhận một trong hai loại:

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Chúng tôi có thể chấp nhận một trong nhiều giá trị:

PropTypes.oneOf(['Test1', 'Test2']),

Chúng ta có thể chấp nhận một thể hiện của một lớp:

PropTypes.instanceOf(Something)

Chúng tôi có thể chấp nhận bất kỳ nút React nào:

PropTypes.node

hoặc thậm chí bất kỳ loại nào:

PropTypes.any

Mảng có một cú pháp đặc biệt mà chúng ta có thể sử dụng để chấp nhận một mảng của một kiểu cụ thể:

PropTypes.arrayOf(PropTypes.string)

Đối tượng, chúng ta có thể tạo một thuộc tính đối tượng bằng cách sử dụng

PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

Yêu cầu thuộc tính

Kết thúcisRequiredđối với bất kỳ tùy chọn PropTypes nào sẽ khiến React trả về lỗi nếu thuộc tính đó bị thiếu:

PropTypes.arrayOf(PropTypes.string).isRequired,
PropTypes.string.isRequired,

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: