Reatt array di proptype con forma

Question

Esiste un modo incorporato per utilizzare proptype per garantire che una matrice di oggetti passati a un componente sia in realtà una matrice di oggetti di una forma specifica?

Forse qualcosa del genere?

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

Mi manca qualcosa di super ovvio qui? Sembra che questo sarebbe molto ricercato.

Answer 1

E lì è ... proprio sotto il mio naso:

Dalle reagire docs stessi: https://facebook.github.io/react/docs/reusable-components.html

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

Answer 2

È possibile utilizzare React.PropTypes.shape() come argomento per 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, 
} 

Vedere la sezione Prop Validation della documentazione.

UPDATE

A partire dal react v15.5, utilizzando React.PropTypes è deprecato e il pacchetto autonomo prop-types dovrebbe essere utilizzato al posto:

// 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, 
} 

Answer 3

C'è una scorciatoia importazione ES6, è possibile fare riferimento. Più leggibile e facile da digitare.

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: [], 
    } 
} 

Answer 4

Sì, è necessario utilizzare PropTypes.arrayOf invece di PropTypes.array nel codice, si può fare qualcosa di simile:

import PropTypes from 'prop-types'; 

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

Anche per maggiori dettagli su proptypes, visitare Typechecking Con PropTypeshere

Answer 5

Se devo definire più volte gli stessi proptypes per una particolare forma, mi piace estenderlo a un file proptypes in modo che se la forma dell'oggetto cambia , Devo solo cambiare il codice in un posto. Aiuta a seccare un po 'il codice base.

Esempio:

// 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) 
}