Реагируй массив типа с формой

Question

Реагируй массив типа с формой

109

Есть ли встроенный способ использования proptypes, чтобы гарантировать, что массив объектов, передаваемых компоненту, на самом деле представляет собой массив объектов определенной формы?

Может быть, что-то вроде этого?

annotationRanges: PropTypes.array(PropTypes.shape({
    start: PropTypes.number.isRequired,
    end: PropTypes.number.isRequired,
})),

Я пропустил что-то сверх очевидное здесь? Похоже, это было бы очень востребовано.

majorBummer 01 сен. 2015, в 06:52

Источник

Теги:

reactjs

arrays

react-proptypes

5 ответов

Ещё вопросы

Pcriulan · Answer 1 · 2015-09-01T09-31-00.000Z

Вы можете использовать React.PropTypes.shape() в качестве аргумента для React.PropTypes.arrayOf():

// an array of a particular shape.
ReactComponent.propTypes = {
   arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({
     color: React.PropTypes.string.isRequired,
     fontSize: React.PropTypes.number.isRequired,
   })).isRequired,
}

Обратитесь к разделу Prop Validation документации.

UPDATE

В соответствии с react v15.5 использование React.PropTypes устарело, и вместо него следует использовать автономный пакет prop-types:

// an array of a particular shape.
import PropTypes from 'prop-types'; // ES6 
var PropTypes = require('prop-types'); // ES5 with npm
ReactComponent.propTypes = {
   arrayWithShape: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,
   })).isRequired,
}

Стоит указать на использование .isRequired для каждого свойства React.PropTypes.shape . Я прибыл сюда, потому что ошибочно предположил, что при использовании .isRequired для React.PropTypes.arrayOf мне не нужен. Чтобы добиться полной проверки покрытия, я фактически применил его непосредственно к React.PropTypes.shape .
Да, я делал то же самое, что и вы, но гораздо мощнее иметь возможность помечать только те ключи, которые вы хотите. Кстати, явное всегда лучше, чем неявное для меня.
Этот пример не проходит проверку правильности для меня. Если if arrayWithShape равен [] (пустой массив), то это не arrayWithShape сбою. если arrayWithShape - это {} (объект), это не удастся. Если arrayWithShape равен [{dumb: 'something'}] arrayWithShape [{dumb: 'something'}] (массив без правильных реквизитов), он завершается ошибкой. Мне нужно, чтобы он не arrayWithShape проверку, если arrayWithShape - пустой массив. Я только хочу, чтобы он прошел, если это не пустой массив с объектами, которые имеют color реквизита и fontsize . Что мне не хватает?

majorBummer · Answer 2 · 2015-09-01T09-26-00.000Z

И вот он... прямо под моим носом:

Из самих реакционных документов: https://facebook.github.io/react/docs/reusable-components.html

// An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

Alireza · Answer 3 · 2017-10-20T04-17-00.000Z

Да, вам нужно использовать PropTypes.arrayOf вместо PropTypes.array в коде, вы можете сделать что-то вроде этого:

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  annotationRanges: PropTypes.arrayOf(
    PropTypes.shape({
      start: PropTypes.string.isRequired,
      end: PropTypes.number.isRequired
    }).isRequired
  ).isRequired
}

Также для получения более подробной информации о proptypes посетите Typechecking With PropTypes здесь

В чем причина добавления .isRequired к объекту PropTypes.shape?

Yo Wakita · Answer 4 · 2017-12-12T23-56-00.000Z

Если я должен несколько раз указывать одни и те же proptypes для определенной формы, мне нравится абстрагировать ее до файла proptypes, так что если форма объекта изменяется, мне нужно только изменить код в одном месте. Это помогает немного высушить кодовую базу.

Пример:

// Inside my proptypes.js file
import PT from 'prop-types';

export const product = {
  id: PT.number.isRequired,
  title: PT.string.isRequired,
  sku: PT.string.isRequired,
  description: PT.string.isRequired,
};


// Inside my component file
import PT from 'prop-types';
import { product } from './proptypes;


List.propTypes = {
  productList: PT.arrayOf(product)
}

Moewiz · Answer 5 · 2017-10-12T04-46-00.000Z

Там сокращенный импорт ES6, вы можете ссылаться. Более читаемый и простой в использовании.

import React, { Component } from 'react';
import { arrayOf, shape, number } from 'prop-types';

class ExampleComponent extends Component {
  static propTypes = {
    annotationRanges: arrayOf(shape({
      start: number,
      end: number,
    })).isRequired,
  }

  static defaultProps = {
     annotationRanges: [],
  }
}

Пожалуйста, просмотрите, Как мне написать хороший ответ . Ответы только на код не рекомендуется, потому что они не объясняют, как они решают проблему в вопросе. Вы должны обновить свой ответ, чтобы объяснить, что он делает и как он улучшает ответ на этот вопрос, который уже есть.