Question

在React的Thinking in React教程中，在创建ProductTable组件时，表最初是静态创建的，部分如下：

var ProductTable = React.createClass({
  render: function() {
    var rows = [];
    var lastCategory = null;
    this.props.products.forEach(function(product) {
      if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
        return;
      }
      if (product.category !== lastCategory) {
        rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
      }
      rows.push(<ProductRow product={product} key={product.name} />);
      lastCategory = product.category;
    }.bind(this));  // <-- this is the question
   // return table

但是，在示例的后面，表格是这样创建的：

public string FetchInternetItems()

为什么这里需要绑定？上下文似乎没有改变，为什么需要绑定上下文？

Answer 1

那是因为.forEach()将拥有它自己的背景。因此，如果在this内使用forEach()，则可能会出现意外错误。

这就是为什么你应.bind() forEach()组件的上下文在forEach()

中使用它的上下文

以下示例应说明这一点。

a = [1, 2, 3, 4]

b = {
  a: function() {
    console.log(this)
  },
  b: function() {
    a.forEach(function() {
      console.log(this)
    })
  },
  c: function() {
    a.forEach(function() {
      console.log(this)
    }).bind(this)
  }
}
b.a()
b.b()
b.c()

Answer 2

在第一个示例中，没有使用this.，而在第二个示例中，使用了this.props.inStockOnly。我假设您知道为什么需要bind(this)，因为它将绑定到类。

在React教程示例中的Thinking中是否需要绑定（this）？

2 个答案: