神秘的语法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代替this.submit.bind(this)

它工作,我无法在这个功能的任何地方找到文档,我觉得自己像一个疯狂的人,这个onClick={::this.doSomethingInsideRenderWithoutDotBind}语法叫什么,我在哪里可以阅读更多关于它？

Answer 1

双冒号在这里有详细介绍，目前是 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 }