相关疑难解决方法(0)

我正在尝试在React JSX中执行以下操作(其中ObjectRow是一个单独的组件):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用.然而,来自模板领域并且是JSX的新手,我不确定如何实现上述(多次添加组件).

我正在尝试将jQuery组件转换为React.js,而我遇到的一个问题是基于for循环渲染n个元素.

我理解这是不可能的,或者推荐,并且如果模型中存在数组,则使用它是完全合理的map.那很好,但是当你没有阵列时呢？相反,你有数值等于要渲染的给定数量的元素,那么你应该怎么做？

这是我的例子,我想根据它的层次级别为一个元素添加任意数量的span标记.所以在第3级,我想在文本元素之前使用3个span标签.

在javascript中:

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

我似乎无法得到这个,或类似的东西在JSX React.js组件中工作.相反,我必须执行以下操作,首先将temp数组构建为正确的长度然后循环数组.

React.js

render: function() {
  var tmp = [];
  for (var i = 0; i < this.props.level; i++) {
    tmp.push(i);
  }
  var indents = tmp.map(function (i) {
    return (
      <span className='indent'></span>
    );
  });

  return (
    ...
    {indents}
    "Some text value"
    ...
  );
}

当然,这不是最好的,或唯一的方法来实现这一目标？我错过了什么？

我写了一些代码来渲染ReactJS中的重复元素,但我讨厌它是多么丑陋.

render: function(){
  var titles = this.props.titles.map(function(title) {
    return <th>{title}</th>;
  });
  var rows = this.props.rows.map(function(row) {
    var cells = [];
    for (var i in row) {
      cells.push(<td>{row[i]}</td>);
    }
    return <tr>{cells}</tr>;
  });
  return (
    <table className="MyClassName">
      <thead>
        <tr>{titles}</tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
} 

有没有更好的方法来实现这一目标？

(我想for在模板代码中嵌入循环,或者类似的方法.)