コンポーネントに渡されるオブジェクトの配列が実際に特定の形状のオブジェクトの配列であることを確認するために、proptypeを使用する組み込みの方法はありますか？
たぶんこんな感じ？
annotationRanges: PropTypes.array(PropTypes.shape({
start: PropTypes.number.isRequired,
end: PropTypes.number.isRequired,
})),私はここで超明白な何かを見逃していますか？このようなことが非常に求められているようです。
回答:
次の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」セクションを参照してください。
更新
とおり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,
}arrayWithShapeが[]（空の配列）の場合、失敗しません。場合arrayWithShape{}（オブジェクト）はそれが失敗しません。場合 arrayWithShape である[{dumb: 'something'}]（正しい小道具なし配列は）それが失敗します。arrayWithShapeが空の配列の場合、検証に失敗する必要があります。小道具colorとを持つオブジェクトを含む空でない配列である場合にのみ渡しますfontsize。何が欠けていますか？
はい、コードの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
}[undefined]がないと検証に合格するため
そして、それは...私の鼻の下にあります：
反応ドキュメント自体から：https : //facebook.github.io/react/docs/reusable-components.html
// An array of a certain type
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),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: [],
}
}特定の形状に同じプロップタイプを複数回定義する場合は、それをproptypesファイルに抽象化して、オブジェクトの形状が変化した場合に1か所でコードを変更するだけで済むようにします。コードベースを少し乾燥させるのに役立ちます。
例：
// 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)
}これは空の配列からも保護するための私の解決策でした：
import React, { Component } from 'react';
import { arrayOf, shape, string, number } from 'prop-types';
ReactComponent.propTypes = {
arrayWithShape: (props, propName, componentName) => {
const arrayWithShape = props[propName]
PropTypes.checkPropTypes({ arrayWithShape:
arrayOf(
shape({
color: string.isRequired,
fontSize: number.isRequired,
}).isRequired
).isRequired
}, {arrayWithShape}, 'prop', componentName);
if(arrayWithShape.length < 1){
return new Error(`${propName} is empty`)
}
}
}
.isRequired各プロパティでのの使用を指摘する価値がありReact.PropTypes.shapeます。.isRequiredon を使用React.PropTypes.arrayOfすることで内部に必要がないと誤って想定したため、ここに到着しました。完全なカバレッジ検証を実現するために、実際にそれを直接適用することにもなりReact.PropTypes.shapeました。