如何在不输入.bind(this)的情况下保持上下文反应? [英] How do I keep context in react without stringing .bind(this)?

问题描述

我正在使用react从解析中检索数据，在自己的函数中进行操作，然后更新渲染器中的组件.

I'm using react to retrieve data from parse, manipulate it in my own function, and then update a component in the render.

问题在于，除非附加了bind(this)字符串，否则我无法在自己复杂的函数中更新状态.整个组件如下所示:

The problem is that I can't update the state within my own, convoluted function unless I attach a string of bind(this). The entire component looks like this:

React.Component({

getInitialState: function () {
 return{ 
  isloading:true
 }
},

componentDidMount: function(){
 this.myStupidFunction()
}, 

myStupidFunction : function(){
(
 (
  (nested parse queries that eventually ... 
 return an object and set isloading:false).bind(this))
.bind(this))
.bind(this)
},

render: function (){
  if (this.state.isloading) {
   return(
    <Text "...isloading"/>
   )
  } else {
   return(
    ...actually return important stuff...
   )
  }
 }
})

更聪明的方法是什么?每个嵌套函数都需要真的.bind(this)吗?

What is the smarter way to do this? Do I need to really .bind(this) for every nested function?

推荐答案

有几种方法可以维护组件的上下文.

There are a few ways to maintain the context of your component.

如果使用ES6箭头定义功能.箭头函数强制将其内部上下文与外部上下文相同，无论该函数的调用方式如何.

If you use ES6 arrows to define your functions. Arrow functions force the inner context of this to be the same as the outer context, regardless of how the function is called.

parse.find({
  success: results => {
    // this is correct
    console.log(this);
  }
});

我认为这是最优雅的解决方案，但是并非所有浏览器都支持箭头功能

I think this is the most elegant solution, but not all browsers support arrow functions yet.

React自动将this绑定到组件上的每个顶级方法中.始终保证它们具有正确的上下文.

React automatically binds this into each of the top level methods on your component. They are always guaranteed to have the correct context.

onSuccess: function() {
  // this is correct
  console.log(this);
},
componentWillMount: function() {
  parse.find({
    success: this.onSuccess
  });
}

在我看来，这也相当优雅.它使React只需编写代码即可处理上下文的混乱情况.但是，这可能意味着您最终在组件的顶层使用了太多的方法，因此请谨慎使用.

This is also fairly elegant, in my opinion. It lets React deal with the messiness of context whilst you just write code. However, it can mean that you end up with far too many methods at the top level of your component, so use it sparingly.

某些功能，例如map，允许您有选择地传递上下文，以用作this作为最终参数.这使您无需.bind(this)即可保持正确的上下文.

Some functions, such as map allow you to optionally pass a context to use as this as a final argument. This allows you to maintain the correct context without .bind(this).

data.map(function() {
  console.log(this);
  // this is correct
}, this);

这仅适用于某些方法，因此它并不是真正的通用解决方案.

This only works for some methods, so it's not really a universal solution.

为此创建一个引用，并改用它.

Create a reference to this and use that instead.

var __this__ = this;

parse.find({
  success: results => {
    // __this__ is correct
    console.log(__this__);
  }
});

这种黑客现象在Java语言中已经存在很久了，但是我认为这不是解决问题的好方法.

This hack has been around forever in Javascript, but I don't think it's a great way to solve the problem.

对于那些喜欢使用Javascript的人，您还可以使用 ES7函数绑定来实现语法建议-目前在 Babel 中实现.

For those who like to Javascript on the edge, you could also achieve this using the ES7 function bind syntax proposal — currently implemented in Babel.

parse.find({
  success: this::function(results) {
    // this is correct
    console.log(this);
  }
});

这需要使用ES7的实验性投标阶段功能.您可能还不想开始使用它，但是要意识到它绝对很有趣.左侧的值将绑定到右侧的函数中，如this.

This requires using experimental proposal stage features of ES7. You may not want to start using it yet, but it's definitely interesting to be aware of. The value on the left hand side will be bound into the function on the right, as this.

这篇关于如何在不输入.bind(this)的情况下保持上下文反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！