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)根本没有返回任何内容，代码也会以某种方式停止。

我的意思是在那一行之前一切正常，但是在这一行之后，当我尝试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渲染递归停止而没有错误

1 个答案: