रहस्यमय वाक्यविन्यास onClick = {:: this.submit}

Question

मैं इस सप्ताह के अंत में कुछ हालिया प्रतिक्रिया रिपोज़ लूट रहा था और मैं घटक संरचना के लिए ES6 क्लास सिंटैक्स का उपयोग करके एक उदाहरण में आया जो इस तरह थोड़ा सा चला गया।

class MyThing extends Component { 
     constructor(props) { 
     super(props) 
     this.state = {something: 'the thing'} 
     } 

     submit() { 
     // do stuff 
     } 

     render() { 
     <div> 
      <button onClick={::this.submit}>Fire Submit</button> 
     </div> 
     } 
    } 

नोटिस की this.submit.bind(this)

यह काम करता है, और मैं प्रलेखन कहीं भी इस सुविधा पर नहीं मिल सकता है, मैं एक पागल व्यक्ति की तरह महसूस एवज में ::this.submit, इस onClick={::this.doSomethingInsideRenderWithoutDotBind} वाक्य रचना कहा जाता है क्या है और जहां मैं और अधिक पढ़ सकते हैं इसके बारे में?

Answer 1

डबल कॉलन विस्तृत है here और वर्तमान में एक ईएस 7 प्रस्ताव है, इसलिए यह अभी तक पत्थर में स्थापित नहीं है और अभी भी इस पर बहुत बहस है। यह पैरामीटर को पारित करने की अनुमति भी नहीं देता है। इसलिए यदि आपके पास आवश्यकता है तो इसका सीमित उपयोग होता है।

वहाँ भी है 'वसा तीर' समारोह विकल्प (वास्तविक समारोह पर इस्तेमाल किया और इसे करने के लिए कॉल) कि lexically इस को बांधता है ...

// Basic syntax: 
(param1, param2, paramN) => { statements } 
(param1, param2, paramN) => expression 
    // equivalent to: => { return expression; } 

// Parentheses are optional when there's only one argument: 
(singleParam) => { statements } 
singleParam => { statements } 

// A function with no arguments requires parentheses: 
() => { statements } 

// Advanced: 
// Parenthesize the body to return an object literal expression: 
params => ({foo: bar}) 

// Rest parameters are supported 
(param1, param2, ...rest) => { statements }