Phản ứng mảng proptype với hình dạng

Có cách tích hợp nào để sử dụng proptype để đảm bảo rằng một mảng các đối tượng được truyền cho một thành phần thực sự là một mảng các đối tượng có hình dạng cụ thể không?

Có lẽ một cái gì đó như thế này?

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

Tôi có thiếu một cái gì đó siêu rõ ràng ở đây? Có vẻ như điều này sẽ được tìm kiếm cao.

Bạn có thể sử dụng React.PropTypes.shape()làm đối số để 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,
}

Xem phần Xác thực Prop của tài liệu.

CẬP NHẬT

Kể từ đó react v15.5, việc sử dụng React.PropTypesbị phản đối và gói độc lập prop-typesnên được sử dụng thay thế:

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

Có, bạn cần sử dụng PropTypes.arrayOfthay vì PropTypes.arraytrong mã, bạn có thể làm một cái gì đó như thế này:

import PropTypes from 'prop-types';

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

Ngoài ra để biết thêm chi tiết về proptypes , hãy truy cập typechecking With PropTypes tại đây

Và nó ở đó ... ngay dưới mũi tôi:

Từ chính các tài liệu phản ứng: https://facebook.github.io/react/docs/reUs-components.html

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

Có nhập khẩu tốc ký ES6, bạn có thể tham khảo. Dễ đọc hơn và dễ gõ.

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

Nếu tôi định nghĩa các proptype giống nhau cho một hình dạng cụ thể nhiều lần, tôi thích trừu tượng hóa nó thành một tệp proptypes để nếu hình dạng của đối tượng thay đổi, tôi chỉ phải thay đổi mã ở một nơi. Nó giúp làm khô codebase một chút.

Thí dụ:

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

Đây cũng là giải pháp của tôi để bảo vệ chống lại một mảng trống:

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