ตอบสนองอาร์เรย์ proptype ที่มีรูปร่าง

มีวิธีการใช้ proptypes ในตัวเพื่อให้แน่ใจว่าอาร์เรย์ของวัตถุที่ถูกส่งผ่านไปยังองค์ประกอบเป็นอาร์เรย์ของวัตถุที่มีรูปร่างเฉพาะหรือไม่?

อาจจะเป็นเช่นนี้?

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

ดูส่วนการตรวจสอบความถูกต้องของเอกสารประกอบ

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

ใช่คุณต้องใช้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 ที่นี่

ภายใต้จมูกฉัน:

จากเอกสารตอบโต้ตัวเอง: 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 ที่เหมือนกันสำหรับรูปร่างเฉพาะหลาย ๆ ครั้งฉันชอบ abstract มันออกเป็นไฟล์ proptypes เพื่อที่ว่าถ้ารูปร่างของวัตถุเปลี่ยนไปฉันจะต้องเปลี่ยนรหัสในที่เดียว มันช่วยทำให้ codebase แห้งไปเล็กน้อย

ตัวอย่าง:

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