आकृति के साथ प्रोक्टाइप सरणी को फिर से लिखें

Question

क्या यह सुनिश्चित करने के लिए कि एक घटक को पास करने के लिए वस्तुओं का एक सरणी वास्तव में एक विशिष्ट आकार की वस्तुओं की एक सरणी है, क्या प्रॉपटीज़ का उपयोग करने का एक अंतर्निहित तरीका है?

शायद ऐसा कुछ हो?

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

क्या मुझे यहाँ कुछ सुपर स्पष्ट याद आ रहा है? इस तरह लगता है बहुत बाद की मांग की जाएगी।

Answer 1

आप निम्न के 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,
}

Comments

यह .isRequiredप्रत्येक की संपत्ति पर उपयोग को इंगित करने के लायक है React.PropTypes.shape। मैं यहां इसलिए पहुंचा क्योंकि मैंने गलत तरीके से यह मान लिया था कि इसका इस्तेमाल .isRequiredकरने React.PropTypes.arrayOfके बाद मुझे इसकी जरूरत नहीं थी। पूर्ण कवरेज सत्यापन प्राप्त करने के लिए, मैंने वास्तव में इसे सीधे React.PropTypes.shapeही लागू किया ।

— गुफलाम

हां, मैं आपसे एक ही बात कर रहा था, लेकिन जिस तरह से आप चाहते हैं, उसके लिए केवल संभावना के रूप में झंडा लगाने के लिए यह अधिक शक्तिशाली तरीका है। स्पष्ट रूप से मेरे लिए निहित तरीके से स्पष्टीकरण हमेशा बेहतर होता है।

— पियरे क्रियुलेससी

यह उदाहरण मेरे लिए सत्यापन को सही ढंग से विफल नहीं करता है। अगर है तो arrayWithShape[] (एक खाली सरणी) यह विफल नहीं होता है। अगर arrayWithShape{} (एक वस्तु) है तो यह विफल हो जाता है। अगर arrayWithShape है [{dumb: 'something'}](सही सहारा के बिना एक सरणी) यह विफल रहता है। यदि arrayWithShapeरिक्त स्थान है तो मुझे सत्यापन विफल करने की आवश्यकता है। मैं केवल इसे पास करना चाहता हूं अगर यह एक गैर खाली सरणी है जिसमें ऑब्जेक्ट्स हैं, जो प्रॉप्स हैं colorऔर fontsize। मैं क्या खो रहा हूँ?

— sdc

Answer 2

हां, आपको कोड के 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
}

प्रॉपटाइप्स के बारे में अधिक जानकारी के लिए , यहां Propecypes के साथ टाइपरेकिंग पर जाएं

Comments

जोड़ने का कारण क्या है। PropTypes.shape ऑब्जेक्ट के लिए अप्रकाशित?

— मकोवकास्टर

@makovkastar क्योंकि इसके बिना, [undefined]सत्यापन पास होगा

— user123

Answer 3

और वहाँ यह है ... ठीक मेरी नाक के नीचे:

प्रतिक्रिया डॉक्स से स्वयं: https://facebook.github.io/react/docs/reusable-compenders.html

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

Answer 4

ईएस 6 शॉर्टहैंड आयात है, आप इसका संदर्भ ले सकते हैं। अधिक पठनीय और टाइप करने में आसान।

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

Comments

कृपया समीक्षा करें कि मैं एक अच्छा उत्तर कैसे लिखूं । कोड-केवल उत्तर हतोत्साहित किए जाते हैं क्योंकि वे यह नहीं बताते हैं कि वे प्रश्न में समस्या का समाधान कैसे करते हैं। आपको यह बताने के लिए अपने उत्तर को अपडेट करना चाहिए कि यह क्या करता है और यह उत्कीर्ण उत्तरों पर पहले से मौजूद इस प्रश्न पर कैसे सुधार करता है।

— फ्लिफ़्केट्न

Answer 5

यदि मैं एक ही आकार को कई बार किसी विशेष आकार के लिए परिभाषित करता हूं, तो मुझे यह पसंद आता है कि यह एक प्रॉपर फाइल में सम्‍मिलित हो जाए ताकि यदि वस्तु का आकार बदल जाए, तो मुझे केवल एक ही जगह कोड बदलना होगा। यह कोडबेस को थोड़ा सूखने में मदद करता है।

उदाहरण:

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

Answer 6

यह एक खाली सरणी से बचाने के लिए मेरा समाधान था:

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