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




3 Answers

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

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

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

annotationRanges: PropTypes.array(PropTypes.shape({
    start: PropTypes.number.isRequired,
    end: PropTypes.number.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 هنا




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



Related

arrays reactjs react-proptypes