神秘的语法onClick = {:: this.submit}

本周末我掠夺了一些最近的反应回购，并且我遇到了一个使用ES6类语法的组件组合的例子，它有点像这样。神秘的语法onClick = {:: this.submit}

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}语法打来电话，我在哪里可以阅读更多关于它？

来源

2015-12-14 James

+12

https://github.com/zenparsing/es-function-bind – Quentin

@Quentin就是这样！你很棒，非常感谢。我会接受这个答案，在你的闲暇时间。 – James

请记住，这是一个阶段0的功能，这意味着要实现标准化还有很长的路要走。有趣的知道，但最好避免在你自己的代码。 –

双冒号是详细的here，目前是ES7提案，所以它还没有确定下来，对此仍有很多争议。它也不允许传递参数。所以如果你有这种需求，它的使用有限。

还存在词汇结合这次“胖箭头”功能选项（在实际的使用功能，而不是对它的调用）...

// 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 }

来源

2015-12-18 05:57:30

神秘的语法onClick = {:: this.submit}

回答

相关问题