आप ReactJS में एक नेस्टेड ऑब्जेक्ट के PropTypes को कैसे मान्य करते हैं?

Question

मैं ReactJS में एक घटक के रूप में एक डेटा ऑब्जेक्ट का उपयोग कर रहा हूं।

<Field data={data} />

मुझे पता है कि PropTypes ऑब्जेक्ट को ही मान्य करना आसान है:

propTypes: {
  data: React.PropTypes.object
}

लेकिन क्या होगा अगर मैं अंदर के मूल्यों को मान्य करना चाहता हूं? अर्थात। data.id, data.title?

props[propName]: React.PropTypes.number.required // etc...

Answer 1

आप React.PropTypes.shapeगुणों को मान्य करने के लिए उपयोग कर सकते हैं :

propTypes: {
    data: React.PropTypes.shape({
      id: React.PropTypes.number.isRequired,
      title: React.PropTypes.string
    })
}

अपडेट करें

जैसा कि @ क्रिस ने टिप्पणियों में बताया है, रिएक्ट संस्करण 15.5.0 के रूप में React.PropTypesपैकेज में चला गया है prop-types।

import PropTypes from 'prop-types';    

propTypes: {
    data: PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string
    })
}

और जानकारी

Comments

सटीक उत्तर @nilgun। आप React के प्रोपेट्स के लिए प्रलेखन पा सकते हैं: facebook.github.io/react/docs/reusable-compenders.html

— wle8300

React.PropTypesअब पदावनत हो गया है। कृपया इसके बजाय पैकेज PropTypesसे उपयोग करें prop-types। यहां अधिक

— क्रिस

Answer 2

यदि React.PropTypes.shapeआप चाहते हैं कि आप जाँच के स्तर को न दें, तो tcomb-reaction पर एक नज़र डालें ।

यह एक toPropTypes()फ़ंक्शन प्रदान करता है जो आपको कस्टम सत्यापनकर्ताओं को परिभाषित करने के लिए प्रतिक्रिया के समर्थन का उपयोग करके tcomb- सत्यापन का उपयोग करके सत्यापन चलाने के लिए tcomb लाइब्रेरी के साथ परिभाषित स्कीमा को मान्य करने देता है ।propTypes

इसके डॉक्स से मूल उदाहरण :

// define the component props
var MyProps = struct({
  foo: Num,
  bar: subtype(Str, function (s) { return s.length <= 3; }, 'Bar')
});

// a simple component
var MyComponent = React.createClass({

  propTypes: toPropTypes(MyProps), // <--- !

  render: function () {
    return (
      <div>
        <div>Foo is: {this.props.foo}</div>
        <div>Bar is: {this.props.bar}</div>
      </div>
    );
  }    
});

Answer 3

ध्यान देना चाहता था कि घोंसला एक स्तर से अधिक गहरा काम करता है। URL पैरामीटर को मान्य करते समय यह मेरे लिए उपयोगी था:

propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired
    })
  })
};

Comments

क्या इसका मतलब idकेवल तभी आवश्यक है यदि कोई match.paramsवस्तु है या isRequiredकैस्केड है, जिसका अर्थ है matchकि किसी paramsवस्तु के साथ एक idप्रोप के साथ जुड़ा हुआ है ? यानी, अगर कोई पैराम प्रदान नहीं किया गया तो क्या यह अभी भी मान्य होगा?

— एस ..

इसे " matchजरूरत पड़ने paramsऔर paramsजरूरत पड़ने " के रूप में पढ़ा जा सकता है id।

— datchung

हाय @datchung वास्तव में जब से मुझे पता चला है (और परीक्षण किया गया) यह कैसे पढ़ता है और यह है कि अगर matchमौजूद है और यदि matchशामिल है, paramsतो यह आवश्यक है paramsजिसमें एक स्ट्रिंग शामिल है id।

— एस ..

Answer 4

user: React.PropTypes.shap({
    age: (props, propName) => {
       if (!props[propName] > 0 && props[propName] > 100) {
          return new Error(`${propName} must be betwen 1 and 99`)
       }
       return null
    },
})

Comments

स्पष्ट रूप से इस उत्तर में जितना प्रयास किया गया है, अगर यह सिर्फ कोड है, तो इसे प्राप्त करना मुश्किल हो सकता है। कुछ वाक्यों के साथ समाधान पर टिप्पणी करना सामान्य है। कृपया अपना उत्तर संपादित करें और कुछ स्पष्टीकरण जोड़ें।

— मिका सुंदरलैंड