神秘的语法onClick=｛::this.submit｝

Mysterious syntax onClick={::this.submit}

本文关键字：this submit 语法 onClick      更新时间：2023-09-26

这个周末，我正在掠夺一些最近的react repos，我遇到了一个使用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}语法叫什么？我在哪里可以阅读更多关于它的信息？

这里详细介绍了双冒号，它目前是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 }
相关文章：