React-Rails：如何使用 ref 渲染组件？

Question

目前我在 .erb 文件中渲染我的组件，如下所示：

<%= react_component('Counter', number: @counter) %>

这个组件有一个函数使用 promised-xhr:

push: function(operation) {

    if(operation) {
      new_number = this.state.number +1;
    } else {
      new_number = this.state.number -1;
    }

 // This call works.
 // this.setState({number: new_number})

     XHR.post("/update", {
      data: {
        count: new_number
      }
    }).then(function(response) {
   // XHR.post is successful, so I can log the response.
      console.log(response.body.number);
   // But setState does not work because of 'this'
      this.setState({number: reponse.body.number})
    })

}

this.setState({number: response.body.number)} 不起作用，因为 this 不再是组件。我打算使用 React.findDOMNode(this.refs.myComponent) 来查找我的组件并触发新状态。

但是，我不知道如何使用 react_component 为我的计数器组件分配一个引用。

Answer 1

如何记忆 this，然后在回调中使用局部变量？

push: function(operation) {
  // ... 
  // Store `this` as local variable `_this`:
  var _this = this 

  XHR.post("/update", {/*...*/})
    .then(function(response) {
    // use local variable `_this`, which still refers to the component:
      _this.setState({number: reponse.body.number
    })
}

作为旁注，ref 可能无济于事。调用 getDOMNode 后，你会得到一个 DOM 节点（浏览器内置），而不是 React 组件。

React-Rails：如何使用 ref 渲染组件？

React-Rails: How to render a component with a ref?

javascript

ruby-on-rails

reactjs

react-rails