React PropTypes

Как использовать PropTypes для установки необходимого типа опоры

Поскольку JavaScript - это язык с динамической типизацией, у нас действительно нет способа принудительно использовать тип переменной во время компиляции, и если мы передадим недопустимые типы, они не будут работать во время выполнения или дадут странные результаты, если типы совместимы, но не что мы ожидаем.

Поток иМашинописьочень помогают, но у React есть способ напрямую помочь с типами props, и даже до запуска кода наши инструменты (редакторы, линтеры) могут определять, когда мы передаем неправильные значения:

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

Какие типы мы можем использовать

Мы можем принять следующие основные типы:

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

Мы можем принять один из двух типов:

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

Мы можем принять одно из многих значений:

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

Мы можем принять экземпляр класса:

PropTypes.instanceOf(Something)

Мы можем принять любую ноду React:

PropTypes.node

или вообще любого типа:

PropTypes.any

У массивов есть специальный синтаксис, который мы можем использовать для приема массива определенного типа:

PropTypes.arrayOf(PropTypes.string)

Объекты, мы можем составить свойства объекта, используя

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

Требуемые свойства

ДобавлениеisRequiredк любому параметру PropTypes приведет к тому, что React вернет ошибку, если это свойство отсутствует:

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

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции:


Tech Wiki Online!