arrays تتفاعل مجموعة proptype مع الشكل




reactjs react-proptypes (4)

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

https://code.i-harness.com

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

ربما شيء مثل هذا؟

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

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


كان هذا حلاً للحماية من مجموعة فارغة أيضًا:

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

هناك استيراد اختزال 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: [],
  }
}





react-proptypes