Javascript React-显示可变行数

我有一个表，用户可以在其中添加和删除行。行的HTML由

this.displayRow（）

创建，行数存储在

this.state.rowNr

中。我想显示

this.state.rowNr

行，所以类似这样：

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

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

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

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

displayTableBody:function（）{
返回(
{
对于（i=0；i

---

但是，这不是有效的JSX语法。

您可以将包含行的数组分配给变量，并在div中呈现它：

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

代码

Array.apply（null，Array（this.state.rowNr））

使用未定义的值创建长度

this.state.rowNr

的数组

然后将每个未定义的

值转换（或映射）为函数
this.displayRow（）
的结果。我假设这个函数返回一个包含行的元素

还要检查此函数的结果，
displayTableBody
是否用于
render
方法。
您可以将包含行的数组分配给变量，并在div中呈现它：

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

代码
Array.apply（null，Array（this.state.rowNr））
使用未定义的值创建长度
this.state.rowNr
的数组

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

还要检查此函数的结果，
displayTableBody
是否用于
render
方法。
React只能渲染对象或数组，不能渲染javascript表达式

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

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

displayTableBody:function（）{
var行=[]；
对于（i=0；i
React只能呈现对象或数组，不能呈现javascript表达式

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

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

displayTableBody:function（）{
var行=[]；
对于（i=0；i
您可以这样做：

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

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

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

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

displayTableBody:function（）{
var行=[]；
对于（var i=0；i
您可以这样做：

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

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

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

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

displayTableBody:function（）{
var行=[]；
对于（var i=0；i
我不知道为什么我在被OP接受后被否决。你介意留下一条评论来解释为什么你否决了我吗？否决的原因：使用
数组。apply
很聪明，但会产生一些你无法使用的东西，数组中的未定义项，只是为了能够使用
.map
作为一个奇特的迭代器（通过在函数体中丢弃/不使用
el
。代码很难阅读、理解和模糊，而且，依我看，这不是首选的方式。此外，由于您在
rowNr
上进行循环以创建未定义的数组，然后再次在数组上进行映射，因此速度会慢得多。不过，讨论仍在继续因为OP想要一个复制粘贴答案，所以没有意义。你真的担心这种过早的优化吗？说它会慢得多是很有趣的。另外，
Array.apply
是惯用的，而for循环可能更容易理解（我同意你的看法），这一行代码通常看起来是JavaScript代码。我还提供了另一种初始化数组的方法，使用lodash/下划线。我不想听起来很粗鲁，但这次否决让人觉得你的自尊心受到了伤害。我的自尊心远没有受到伤害，我已经被否决和拒绝了很多次——然而，我确实认为这是在做什么呢上面的e，虽然它在工作，但一点帮助也没有——它过于复杂，难以阅读，而且它不是一个过早的优化，因为通过查看它，你知道它很糟糕，而且速度很慢。Python社区有一句话。应该有一个——最好只有一个——明显的方法来做到这一点。我不确定为什么我在成为acc后被否决被OP接受。你介意留下一条评论来解释为什么你否决了我吗？否决的原因：使用
数组。apply
很聪明，但会产生一些你无法使用的东西，数组中的未定义项，只是为了能够使用
.map
作为一个奇特的迭代器（通过在函数体中丢弃/不使用
el
。代码很难阅读、理解和模糊，而且，依我看，这不是首选的方式。此外，由于您在
rowNr
上进行循环以创建未定义的数组，然后再次在数组上进行映射，因此速度会慢得多。不过，讨论仍在继续因为OP想要一个复制粘贴答案，所以没有意义。你真的担心这种过早的优化吗？说它会慢得多是很有趣的。另外，
Array.apply
是惯用的，而for循环可能更容易理解（我同意你的看法），这一行代码通常看起来是JavaScript代码。我还提供了另一种初始化数组的方法，使用lodash/下划线。我不想听起来很粗鲁，但这次否决让人觉得你的自尊心受到了伤害。我的自尊心远没有受到伤害，我已经被否决和拒绝了很多次——然而，我确实认为这是在做什么呢上面的e，虽然它在工作，但一点帮助也没有——它过于复杂，难以阅读，而且它不是一个过早的优化，因为通过查看它，您知道它很糟糕，而且速度很慢。Python社区有一句话。应该有一种——最好只有一种——显而易见的方法来实现它。