arrays - رد فعل صفيف proptype مع الشكل




reactjs react-proptypes (5)

هل هناك طريقة مدمجة لاستخدام نماذج proptypes للتأكد من أن مجموعة من الكائنات التي يتم تمريرها إلى أحد المكونات هي في الواقع مجموعة من الكائنات ذات الشكل المحدد؟

ربما شيء من هذا القبيل؟

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

هل فقدت شيئًا واضحًا هنا؟ يبدو أن هذا سيكون سعى للغاية بعد.


Answers

هناك الاستيراد اختصار 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 بحيث إذا تغير شكل الكائن ، فلا بد لي من تغيير الشفرة في مكان واحد. يساعد على تجفيف قاعدة البيانات قليلا.

مثال:

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

يمكنك استخدام 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,
}

انظر قسم التحقق من صحة الدعامة في الوثائق.

تحديث

اعتبارًا من 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,
}

انها ليست متطابقة 100 ٪ ، ولكنها مماثلة:

   var myStringArray = ['Hello', 'World']; // array uses [] not {}
    for (var i in myStringArray) {
        console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
    }







arrays reactjs react-proptypes