反应渲染递归停止没有错误

Question

我在 React 中渲染某些元素时遇到了问题。（我用的是ImmutableJS）

renderComponents: function(components) {
    if(components.isEmpty()) return [];

    var table = [];

    components.map(function(component) {
      table.push(<ComponentTableElement key={ component.get('id') } data={ component } />);

      if(component.has('children')) {
        var children = component.get('children');
        table.concat(this.renderComponents(children));
      }
    });

    return table;
  },

当我查找错误时，我发现 this.renderComponents(children) 根本没有 return 任何东西，代码不知何故停止了。

我的意思是在那行之前一切正常，但是在这一行之后，当我尝试 console.log 某些东西时，它没有出现。它甚至没有达到 return table.

那段代码有什么问题？

Answer 1

在传递给 map 的函数的上下文中，this 指的是 window 对象，而不是当前组件实例，因此当您尝试时 this.renderComponents 是未定义的叫它。

components.map(function(component) {
  this === window;
});

您可以在函数体内传递一个值作为 this 作为 Array::map 的第二个参数。

components.map(function(component) {
  table.push(<ComponentTableElement key={ component.get('id') } data={ component } />);

  if(component.has('children')) {
    var children = component.get('children');
    // here, `this` refers to the component instance
    table.concat(this.renderComponents(children));
  }
}, this);

如果您使用的是 ES6，您还可以使用自动绑定到 this 的粗箭头函数。

components.map((component) => {
  table.push(<ComponentTableElement key={ component.get('id') } data={ component } />);

  if(component.has('children')) {
    var children = component.get('children');
    // here, `this` refers to the component instance
    table.concat(this.renderComponents(children));
  }
});

反应渲染递归停止没有错误

React rendering recursion stops without error

recursion

reactjs