React proptype array with shape

Question

Czy istnieje wbudowany sposób na użycie typów, aby zapewnić, że tablica obiektów przekazywanych do komponentu jest w rzeczywistości tablicą obiektów o określonym kształcie?

Może coś takiego?

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

Czy brakuje tu czegoś bardzo oczywistego? Wydaje się, że byłoby to bardzo poszukiwane.

Answer 1

I nie jest to ... tuż pod nosem:

Z tych samych reagują docs: https://facebook.github.io/react/docs/reusable-components.html

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

Answer 2

Można użyć React.PropTypes.shape() jako argument do 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, 
} 

Zobacz dokumentację w sekcji Prop Validation.

UPDATE

Od react v15.5 korzystając React.PropTypes jest przestarzała i pakiet autonomiczny prop-types powinien być stosowany zamiast:

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

Jest skrótem import ES6 można odwołać. Bardziej czytelny i łatwy do wpisania.

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

Tak, trzeba użyć PropTypes.arrayOf zamiast PropTypes.array w kodzie, można zrobić coś takiego:

import PropTypes from 'prop-types'; 

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

także więcej szczegółów na temat proptypes, odwiedź Typechecking Z PropTypeshere

Answer 5

Jeśli mam zdefiniować ten sam typ dla danego kształtu wiele razy, to lubię go wypakowywać do pliku typów, aby zmienić kształt obiektu , Muszę tylko zmienić kod w jednym miejscu. Pomaga to nieco wysuszyć bazę kodów.

Przykład:

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