首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在没有要映射的对象数组的情况下在React.js中循环和渲染元素?

如何在没有要映射的对象数组的情况下在React.js中循环和渲染元素?
EN

Stack Overflow用户
提问于 2015-03-19 23:49:46
回答 4查看 361.1K关注 0票数 164

我正在尝试将jQuery组件转换为React.js,我遇到的困难之一是基于for循环呈现n个元素。

我知道这是不可能的,或者是推荐的,如果模型中存在一个数组,使用map是完全有意义的。这很好,但是如果没有数组呢?相反,你有一个数值,它等同于要呈现的给定数量的元素,那么你应该怎么做?

下面是我的例子,我想根据元素的层次结构给它加上任意数量的span标签作为前缀。因此,在第3级,我希望在文本元素之前有3个span标记。

在javascript中:

代码语言:javascript
复制
for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

我似乎无法理解这一点,或者任何类似于在JSX React.js组件中工作的东西。相反,我必须执行以下操作,首先构建一个长度正确的临时数组,然后循环该数组。

React.js

代码语言:javascript
复制
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"
    ...
  );
}

这肯定不是最好的,或者是实现这一目标的唯一方法?我遗漏了什么?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29149169

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档