React
प्रतिक्रिया में सहारा

टिप्पणियों

परिचय

props का उपयोग मूल घटक से बाल घटक तक डेटा और विधियों को पारित करने के लिए किया जाता है।

props बारे में दिलचस्प बातें

1. वे अपरिवर्तनीय हैं।
2. वे हमें पुन: प्रयोज्य घटक बनाने की अनुमति देते हैं।

मूल उदाहरण

class Parent extends React.Component{
  doSomething(){
     console.log("Parent component");
  }
  render() {
    return <div>
         <Child 
           text="This is the child number 1"
           title="Title 1" 
           onClick={this.doSomething} />
         <Child 
           text="This is the child number 2"
           title="Title 2" 
           onClick={this.doSomething} />
      </div>
  }
}

class Child extends React.Component{
  render() {
    return <div>
       <h1>{this.props.title}</h1>
       <h2>{this.props.text}</h2>
      </div>
  }
}

जैसा कि आप उदाहरण में देख सकते हैं, props के लिए धन्यवाद हम पुन: प्रयोज्य घटक बना सकते हैं।

डिफ़ॉल्ट सहारा

defaultProps आपको अपने घटक props लिए डिफ़ॉल्ट, या फ़ॉलबैक, मान सेट करने की अनुमति देता है। defaultProps तब उपयोगी होते हैं जब आप निश्चित प्रॉप्स के साथ अलग-अलग विचारों से घटकों को कॉल करते हैं, लेकिन कुछ दृश्यों में आपको अलग-अलग मूल्य पास करने की आवश्यकता होती है।

वाक्य - विन्यास

ES5

var MyClass = React.createClass({
  getDefaultProps: function() {
    return {
      randomObject: {},
      ...
    };
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.defaultProps = {
    randomObject: {},
    ...
}

ES7

class MyClass extends React.Component {  
    static defaultProps = {
        randomObject: {},
        ...
    };
}

का परिणाम getDefaultProps() या defaultProps कैश की गई और यह सुनिश्चित करें कि इस्तेमाल किया जाएगा this.props.randomObject एक मूल्य अगर यह माता पिता के घटक द्वारा निर्दिष्ट नहीं किया गया होगा।

PropTypes

propTypes आप क्या निर्दिष्ट कर सकते हैं props अपने घटक जरूरतों और प्रकार वे किया जाना चाहिए। propTypes को सेट किए बिना आपका कंपोनेंट काम करेगा, लेकिन इन्हें परिभाषित करने के लिए यह अच्छा अभ्यास है क्योंकि यह आपके कंपोनेंट को अधिक पठनीय बना देगा, अन्य डेवलपर्स के लिए प्रलेखन के रूप में कार्य करेगा जो आपके कंपोनेंट को पढ़ रहे हैं, और विकास के दौरान, यदि आप प्रयास करेंगे तो रिएक्ट आपको चेतावनी देगा। एक प्रोप सेट करें जो आपके लिए निर्धारित परिभाषा के लिए एक अलग प्रकार है।

कुछ आदिम propTypes और आमतौर पर प्रयोग करने योग्य propTypes

  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol

आप संलग्न करते हैं isRequired किसी भी करने के लिए propType तो उस प्रोप कि घटक के उदाहरण बनाने के दौरान प्रदान की जानी चाहिए। यदि आप आवश्यक propTypes नहीं propTypes तो घटक उदाहरण नहीं बनाया जा सकता है।

वाक्य - विन्यास

ES5

var MyClass = React.createClass({
  propTypes: {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.propTypes = {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
};

ES7

class MyClass extends React.Component {  
     static propTypes = {
        randomObject: React.PropTypes.object,
        callback: React.PropTypes.func.isRequired,
        ...
    };
}

अधिक जटिल सहारा सत्यापन

उसी तरह, PropTypes आपको अधिक जटिल सत्यापन निर्दिष्ट करने की अनुमति देता है

किसी वस्तु को मान्य करना

...
    randomObject: React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    }).isRequired,
...

वस्तुओं की सरणी पर मान्य

...
    arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    })).isRequired,
...

प्रसार ऑपरेटर का उपयोग कर नीचे गुजरता है

के बजाय

var component = <Component foo={this.props.x} bar={this.props.y} />;

जहां प्रत्येक प्रॉपर्टी को एक ही प्रोप वैल्यू के रूप में पारित करने की आवश्यकता होती है, जहां आप प्रसार ऑपरेटर का उपयोग कर सकते हैं ... आपके सभी मूल्यों को पारित करने के लिए ईएस 6 में सरणियों के लिए समर्थित है। घटक अब इस तरह दिखेगा।

var component = <Component {...props} />;

याद रखें कि आप जिस ऑब्जेक्ट से गुजरते हैं उसके गुण घटक के प्रॉपर पर कॉपी किए जाते हैं।

आदेश महत्वपूर्ण है। बाद में विशेषताएँ पिछले वाले ओवरराइड करती हैं।

 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo); // 'override'

एक अन्य मामला यह है कि आप प्रॉप ऑपरेटर को भी प्रॉप्स के कुछ हिस्सों को पास करने के लिए बच्चों के घटकों का उपयोग कर सकते हैं, फिर आप प्रॉप्स से फिर से विनाशकारी सिंटैक्स का उपयोग कर सकते हैं।

यह बहुत उपयोगी है जब बच्चों के घटकों को बहुत सारे प्रॉपर की आवश्यकता होती है, लेकिन उन्हें एक-एक करके पास नहीं करना चाहते हैं।

 const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' };
 var component = <Component {...{foo, bar}} />;
 const { foo, bar } = component.props
 console.log(foo, bar); // 'foo bar'

Props.children और घटक रचना

एक घटक के "बच्चे" घटक एक विशेष प्रोप, props.children पर उपलब्ध हैं। यह प्रस्ताव "कम्पोज़िटिंग" घटकों के लिए एक साथ बहुत उपयोगी है, और DOM के इच्छित अंतिम ढांचे में JSX मार्कअप को अधिक सहज या प्रतिबिंबित कर सकता है:

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {this.props.children}
            </div>
        </article>
    );
}

जो बाद में घटक का उपयोग करते समय हमें उप-तत्वों की एक मनमानी संख्या को शामिल करने की अनुमति देता है:

var ParentComponent = function () {
    return (
        <SomeComponent heading="Amazing Article Box" >
            <p className="first"> Lots of content </p>
            <p> Or not </p>
        </SomeComponent>
    );
}

Props.children को घटक द्वारा हेरफेर भी किया जा सकता है। क्योंकि props.children एक सरणी हो सकता है या नहीं भी हो सकता है , React उनके लिए React.Children के रूप में उपयोगिता कार्य प्रदान करता है। पिछले उदाहरण पर विचार करें, यदि हम प्रत्येक पैराग्राफ को अपने <section> तत्व में लपेटना चाहते थे:

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {React.Children.map(this.props.children, function (child) {
                    return (
                        <section className={child.props.className}>
                            React.cloneElement(child)
                        </section>
                    );
                })}
            </div>
        </article>
    );
}

बच्चे से प्रॉप्स निकालने के लिए React.cloneElement के उपयोग पर ध्यान दें <p> टैग - क्योंकि प्रॉम्प्स अपरिवर्तनीय हैं, इन मानों को सीधे नहीं बदला जा सकता है। इसके बजाय, इन प्रॉप्स के बिना एक क्लोन का उपयोग किया जाना चाहिए।

इसके अतिरिक्त, जब लूप में तत्वों को जोड़ते हैं, तो इस बात से अवगत रहें कि रिएक्टर एक रेंडरर के दौरान बच्चों को कैसे समेटता है, और लूप में जोड़े गए बाल तत्वों पर विश्व स्तर पर अद्वितीय key प्रोप सहित दृढ़ता से विचार करता है।

बच्चों के घटकों के प्रकार का पता लगाना

कभी-कभी बाल घटक के प्रकार को जानना वास्तव में उपयोगी होता है जब उनके माध्यम से पुनरावृत्ति होती है। बच्चों के घटकों के माध्यम से पुनरावृति करने के लिए आप React Children.map उपयोग फ़ंक्शन का उपयोग कर सकते हैं:

React.Children.map(this.props.children, (child) => {
  if (child.type === MyComponentType) {
    ...
  }
});

बाल वस्तु उस type संपत्ति को उजागर करती है जिसकी आप किसी विशिष्ट घटक से तुलना कर सकते हैं।