Mảng proptype phản ứng có hình dạng

Question

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

Có thể giống như thế này?

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

Tôi có thiếu thứ gì đó siêu hiển nhiên ở đây không? Có vẻ như điều này sẽ được đánh giá cao sau khi tìm kiếm.

Answer 1

Và có nó là ... ngay dưới mũi tôi:

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

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

Answer 2

Bạn có thể sử dụng React.PropTypes.shape() như một cuộc tranh cãi để 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 Prop Validation của tài liệu.

CẬP NHẬT

Tính đến react v15.5, sử dụng React.PropTypes bị phản đối và gói độc prop-types nên được sử dụng thay vì:

// 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ó một ES6 tốc ký nhập khẩu, bạn có thể tham khảo. Dễ đọc hơn và dễ nhập hơn.

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

Có, bạn cần phải sử dụng PropTypes.arrayOf thay vì PropTypes.array trong các 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 Với PropTypeshere

Answer 5

Nếu tôi định nghĩa cùng một kiểu proptypes cho một hình dạng cụ thể nhiều lần, tôi thích tóm tắt nó thành tệp proptypes sao cho 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.

Ví 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) 
}