प्रतिक्रिया केवल इसके लिए घटक तरीकों को बांधती है - चारों ओर काम करते हैं?

Question

प्रतिक्रिया 0.14 के साथ ES6 का उपयोग करते समय बॉयलरप्लेट से बचने का कोई तरीका है?

अब तक मैं Component मैं बनाया करने के लिए बाध्य होने के लिए मेरी समारोह के बारे में चिंता करने की ज़रूरत नहीं किया था, लेकिन वह नहीं रह गया है (क्यों?!?) मामले और घटक केवल Component सुपर वर्ग के लिए घिरा है (यदि मैं त्रुटियों को सही ढंग से समझ गया)।

इसलिए मैं वास्तव में हर बार मैं बना एक नया वर्ग निर्माता के लिए इस कोड को जोड़ने के लिए है क्या करने की जरूरत: अगर मैं newFunction यह असफल हो जायेगी (कोई सहारा, राज्य या कुछ भी बाध्य नहीं होते

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    this.newFunction = this.newFunction.bind(this); 
    } 

    newFunction(){ 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

तो)।

क्या इस के आसपास काम करने का कोई तरीका है?

Answer 1

React documentation से:

नहीं Autobinding

तरीके नियमित ES6 वर्ग के रूप में एक ही अर्थ विज्ञान का पालन करें, जिसका अर्थ है कि वे स्वचालित रूप से उदाहरण के लिए इस बाँध नहीं है। आपको स्पष्ट रूप से उपयोग करना होगा। बाइंड (यह) या तीर फ़ंक्शंस =>।

तो, 0.14 में नई विधियों को बांधने का कोई स्वचालित तरीका नहीं है। लेकिन, जैसा कि प्रलेखन पता चलता है, तो आप कर सकते हैं:

1) तीर काम करता है, अगर आप कोलाहल उपयोग कर रहे हैं का उपयोग (हालांकि, अगर आप चरण 0) की जरूरत है:

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction =() => { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

2) आप कर सकते हैं जगह में बाँध:

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction.bind(this)}>Click</button> 
    } 
} 

3) आप एक ar उपयोग कर सकते हैं जगह में पंक्ति समारोह (जो एक बाँध की तरह है):

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={() => this.newFunction()}>Click</button> 
    } 
} 

मैं नंबर 2 & 3 उपयोग करने के लिए करता है, तो मैं केवल एक 1-2 तरीकों करते हैं। संख्या 1 अच्छा है, लेकिन आपको प्रत्येक विधि परिभाषा के लिए वाक्यविन्यास याद रखना होगा। अगर मेरे पास बहुत सी विधियां हैं, तो मैं कन्स्ट्रक्टर में बांधने की कोशिश करता हूं।