Question

鉴于以下javascript，为了将updateSelectedPages方法从父反应组件传递到Image函数内的.map()组件，我首先必须将其分配给变量然后在函数内部使用该变量。有没有办法将函数内部this绑定为父反应组件，这样我就不必使用临时变量了？

var pageNumber = 0;
var updateSelectedPages = this.updateSelectedPages;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}).reduce(function(a, b) {
  return a.concat(b);
});

Answer 1

Array.prototype.map采用第二个参数设置回调函数的上下文。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

如果我理解你的问题，那么以下内容应该足够了：）

var pageNumber = 0;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={this.updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}, this).reduce(function(a, b) {
  return a.concat(b);
});

2年后编辑： 现在你很可能在你的代码中使用箭头函数（如果只是针对最新的浏览器或通过像babel这样的构建工具，可以通过原生支持），除了缩短写入时，它们还有this的词法作用域。 removes the need for binding或将第二个arg传递给array.map()

let pageNumber = 0;
const images = this.props.resources.map(resource => { // <-- using arrow function removes the need to worry about `this`
  const arr = [];
  for(let x = 0; x < resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image
        src={`import/previewImage/${resource.encodedName}?page=${pageNumber}`}
        number={pageNumber}
        updateSelectedPages={this.updateSelectedPages}
        key={pageNumber}
      />
    );
  }
  return arr;
}).reduce(function(a, b) {
  return a.concat(b);
});

Answer 2

您可以按如下方式绑定this：

var pageNumber = 0;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={this.updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}.bind(this)).reduce(function(a, b) {
  return a.concat(b);
});

在ReactJS中，我如何绑定＆＃34;这个＆＃34;到map（）函数中的父组件

2 个答案: