从传递到 React 组件并在那里触发的函数访问 class 实例

Question

我有一个 Backbone/React 应用程序。我试图将所有 backbone 逻辑保留在 backbone 视图（本例中为 FoodList）中，以便我可以将方法传递给组件，让组件触发它们，然后运行视图中的必要逻辑（即操作 backbone 集合），使 backbone 的业务脱离 React 的业务。

我运行遇到的麻烦是，当我尝试从传递到组件的 doSomething 方法访问 this 值时，我得到 window，不是 FoodView 实例。在这种情况下如何绑定 FoodList 实例？

## BACKBONE VIEW:

FoodList = require '../components/FoodList'

class FoodView extends Backbone.View

    initialize:  =>        
        ...done() =>
        @renderFood()


    renderFood: ->            
        React.render(
                <FoodList
                    foods={@collection.foods.toJSON()}
                    doSomething={doSomething} ## method of interest
                />, 
                app.pageEl
            )

    doSomething: (e) ->
        console.log @ ## returns window.
        id = $(e.currentTarget).data('id') 
        @collection.makeAChange(id) ## I want to access the FoodView instance's collection


## REACT COMPONENT:

FoodList = React.createClass

    handleSomething: (e) ->
      @props.doSomething(e)

    render: ->
      return(
        ...
        <li data-id={id} onClick={@handleSomething}>dynamically generated</li>
        ...
      )

Answer 1

使用CoffeeScript，你只需要使用一个粗箭头函数自动将FoodView::doSomething方法绑定到实例上。另见 Bound functions。

class FoodView extends Backbone.View
    doSomething: (e) =>
        // `@` refers to the  FoodView instance

相当于

class FoodView extends Backbone.View
    constructor: ->
        @doSomething = @doSomething.bind(@)

    doSomething: (e) ->
        // `@` refers to the  FoodView instance

从传递到 React 组件并在那里触发的函数访问 class 实例

Access class instance from a function passed into a React component and triggered there

javascript

coffeescript

backbone.js

reactjs