Question

我有一个表，用户可以添加和删除行。行的HTML由this.displayRow()创建，行数存储在this.state.rowNr中。我想显示this.state.rowNr行，所以像这样：

displayTableBody: function() {
    return(<div>
        {
            for(i = 0 ; i < this.state.rowNr ; i++) {
                this.displayRow();
            }
        }
    </div>);
}

然而，这不是有效的JSX语法。

Answer 1

您可以将包含行的数组分配给变量并在div中进行渲染：

displayTableBody: function() {
    var rows = Array.apply(null, Array(this.state.rowNr)).map(function(el) { return this.displayRow(); })
    return (<div> { rows } </div>);
}

或者，使用lodash（JavaScript实用程序库）：

displayTableBody: function() {
    var rows = _.times(this.state.rowNr).map(this.displayRow);
    return (<div> { rows } </div>);
}

代码Array.apply(null, Array(this.state.rowNr))创建一个长度为this.state.rowNr但未定义值的数组。

然后将每个undefined值转换（或映射）到函数this.displayRow()的结果。我假设这个函数返回一个包含行的元素。

同时检查displayTableBody方法中是否使用了此函数render的结果。

Answer 2

React只能呈现对象或数组，而不能呈现javascript表达式。

将for循环移出返回并在那里进行计算。

displayTableBody: function() {
   var rows = [];
   for(i = 0 ; i < this.state.rowNr ; i++) {
       rows.push(this.displayRow());
   }
   return <div>{rows}</div>;
}

Answer 3

你可以这样做：

displayTableBody: function() {
    var rows = [];

    for (var i = 0; i < this.state.rowNr; i++) {
      rows[i] = this.displayRow();
    }

    return(<div>{rows}</div>);
}

React - 显示可变行数

3 个答案: