कैसे प्रतिक्रिया घटक पर घटक डिफ़ॉल्ट सहारा सेट करने के लिए

Question

मैं एक रिएक्ट घटक पर डिफ़ॉल्ट प्रॉप्स सेट करने के लिए नीचे दिए गए कोड का उपयोग करता हूं लेकिन यह काम नहीं करता है। में render()विधि, मैं देख सकता उत्पादन "अपरिभाषित रंगमंच की सामग्री" ब्राउज़र कंसोल पर छपा था। मैं घटक सहारा के लिए एक डिफ़ॉल्ट मान कैसे परिभाषित कर सकता हूं?

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

Answer 1

आप Classब्रैकेट बंद करना भूल गए ।

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Answer 2

बेबल स्टेज -2 या ट्रांसफॉर्म-क्लास-प्रॉपर्टीज जैसे कुछ का उपयोग करने वालों के लिए :

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

---

अपडेट करें

प्रतिक्रिया v15.5 के अनुसार, PropTypesमुख्य प्रतिक्रिया पैकेज ( लिंक ) से बाहर ले जाया गया था :

import PropTypes from 'prop-types';

संपादित करें

जैसा कि @johndodo द्वारा बताया गया है, staticवर्ग गुण वास्तव में ES7 युक्ति का हिस्सा नहीं हैं, बल्कि वर्तमान में केवल बेबल द्वारा समर्थित हैं। उस को प्रतिबिंबित करने के लिए अद्यतन किया गया।

Comments

उत्तर के लिए धन्यवाद, लेकिन मैं इसके बारे में थोड़ा और सीखना चाहता था इसलिए react/ nativedoc पर एक नज़र डाली और उन्हें नहीं पाया, इसके लिए डॉक्टर कहाँ है?

— फार्मकॉमैंड 2

मैं रिएक्ट डॉक्स में स्पष्ट रूप से इसके बारे में नहीं सोचता, लेकिन अगर आप समझते हैं कि staticयह किस वर्ग के चर हैं, तो यह समझ में आता है, इसलिए मैं एमडीएन पर उनके बारे में पढ़ने का सुझाव देता हूं । मूल रूप से, प्रलेखन में वाक्यविन्यास इसके बराबर है क्योंकि दोनों ही वर्ग के लिए सहारा के बारे में जानकारी जोड़ रहे हैं, न कि व्यक्तिगत उदाहरण।

— ट्रेकिआंसन

आयात को बदल दिया जाता है: 'Prop -yps' से PropTypes आयात करें;

— टिबी

@treyhakanson एमडीएन लिंक केवल स्थिर तरीकों के बारे में बात करता है, न कि चर। मुझे बाबेल के अलावा, स्थिर वर्ग चर के लिए एक संदर्भ नहीं मिला । क्या यह एक स्वीकृत ईएस 7 संपत्ति है?

— जॉन्डोडो

Answer 3

पहले आपको अपनी कक्षा को आगे के एक्सटेंशनों से अलग करने की आवश्यकता है जो आप AddAddressComponent.defaultPropsभीतर नहीं बढ़ा सकते हैंclass बजाय इसे बाहर चले जाते हैं।

मैं आपको कंस्ट्रक्टर और रिएक्ट के जीवनचक्र के बारे में पढ़ने के लिए भी सलाह दूंगा : देखें कम्पोनेंट स्पेक्स और लाइफसाइकल देखें

यहाँ आप क्या चाहते हैं:

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;

Comments

क्या आपको यकीन है कि वे जरूरत है constructorऔर componentWillReceiveProps? मुझे लगता है कि ओपी सिर्फ अपने वर्ग की घोषणा के लिए एक बंद ब्रैकेट भूल गया।

— ivarni 10

@ivarni जरूरी नहीं है, लेकिन यह महत्वपूर्ण है कि वह जीवन-चक्र, निर्माता और वर्ग के विस्तार को समझे। इसलिए वह जानता है कि उसका क्या करना है। इसलिए मैंने

— इलनस

उचित रूप से, मुझे लगता है कि "आपको जरूरत है" कहना कड़ाई से सही नहीं है। मैं इसके बजाय "आप जीवनचक्र का निरीक्षण करने के लिए इन विधियों को जोड़ सकते हैं" की तर्ज पर कुछ कहना चाहते हैं । अन्यथा, अच्छा जवाब :)

— ivarni

Answer 4

आप विनाशकारी असाइनमेंट का भी उपयोग कर सकते हैं।

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

मुझे यह तरीका पसंद है क्योंकि आपको ज्यादा कोड लिखने की जरूरत नहीं है।

Comments

मुझे यहाँ जो समस्या दिख रही है, वह यह है कि आप कई तरीकों से डिफ़ॉल्ट प्रॉप्स का उपयोग करना चाह सकते हैं।

— जेरार्ड ब्रूल

Answer 5

एक स्थिर डिफ़ॉल्ट का उपयोग करें जैसे:

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

से लिया गया: https://github.com/facebook/react-native/issues/1772

यदि आप प्रकारों की जांच करना चाहते हैं, तो देखें कि ट्रेकेनसन या इलान हसनोव के उत्तर में PropTypes का उपयोग कैसे करें, या उपरोक्त लिंक में कई उत्तरों की समीक्षा करें।

Answer 6

आप नीचे दिखाए गए अनुसार वर्ग नाम का उपयोग करके डिफ़ॉल्ट प्रॉप्स सेट कर सकते हैं।

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

आप अधिक जानकारी के लिए इस लिंक से रिएक्ट के अनुशंसित तरीके का उपयोग कर सकते हैं

Answer 7

फ़ंक्शन प्रकार प्रोप के लिए आप निम्नलिखित कोड का उपयोग कर सकते हैं:

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};

Answer 8

यदि आप एक कार्यात्मक घटक का उपयोग कर रहे हैं, तो आप डिस्ट्रक्टिंग असाइनमेंट में चूक को परिभाषित कर सकते हैं, जैसे:

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};

Answer 9

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: 'yo' };