Javascript 如何在React.js中循环和渲染元素，而无需映射对象数组？

我正在尝试将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');

for（变量i=0；i

我似乎无法在JSX React.js组件中实现这一点或任何类似的功能。相反，我必须执行以下操作，首先构建一个长度正确的临时数组，然后循环数组

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"
    ...
  );
}

render:function（）{
var tmp=[]；
对于（var i=0；i

---

这肯定不是实现这一目标的最佳或唯一途径吗？我遗漏了什么？

更新：自React>0.16起

Render方法不必返回单个元素。也可以返回数组

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

var缩进=[]；
对于（var i=0；i

或

返回此.props.level.map（（项目，索引）=>(
{index}
));

---

旧版：

您可以使用一个循环来代替

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return (
   <div>
    {indents}
    "Some text value"
   </div>
);

var缩进=[]；
对于（var i=0；i

您也可以使用和想象es6

return (
   <div>
    {this.props.level.map((item, index) => (
       <span className='indent' key={index} />
    ))}
    "Some text value"
   </div>
);

返回(
{this.props.level.map（（项目，索引）=>(
))}
“一些文本值”
);

此外，还必须将返回值包装在容器中。我在上面的例子中使用了div

正如医生所说

当前，在组件的渲染中，只能返回一个节点；如果要返回div列表，则必须将组件包装在div、span或任何其他组件中

---

我正在使用

Object.keys（chars）.map（…）

在渲染中循环

// chars = {a:true, b:false, ..., z:false}

render() {
    return (
       <div>
        {chars && Object.keys(chars).map(function(char, idx) {
            return <span key={idx}>{char}</span>;
        }.bind(this))}
        "Some text value"
       </div>
    );
}

//chars={a:true，b:false，…，z:false}
render（）{
返回(
{chars&&Object.keys（chars.map）（函数（char，idx）{
返回{char}；
}.bind（this））}
“一些文本值”
);
}

以下是一些ES6功能的更多功能示例：

'use strict';

const React = require('react');

function renderArticles(articles) {
    if (articles.length > 0) {      
        return articles.map((article, index) => (
            <Article key={index} article={article} />
        ));
    }
    else return [];
}

const Article = ({article}) => {
    return ( 
        <article key={article.id}>
            <a href={article.link}>{article.title}</a>
            <p>{article.description}</p>
        </article>
    );
};

const Articles = React.createClass({
    render() {
        const articles = renderArticles(this.props.articles);

        return (
            <section>
                { articles }
            </section>
        );
    }
});

module.exports = Articles;

“严格使用”；
const React=require（'React'）；
函数渲染文章（文章）{
如果（articles.length>0）{
返回文章.map（（文章，索引）=>(
{文章说明}

);
};
const Articles=React.createClass({
render（）{
const articles=renderArticles（this.props.articles）；
返回(
{条款}
);
}
});
模块.出口=物品；

我认为这是在react js中循环的最简单方法

<ul>
    {yourarray.map((item)=><li>{item}</li>)}
</ul>

{yourarray.map（（item）=>
{item}
）}

将iterable对象转换为数组和可选映射函数。您可以使用

.length

属性创建对象，如下所示：

return Array.from({length: this.props.level}, (item, index) => 
  <span className="indent" key={index}></span>
);

返回数组.from（{length:this.props.level}，（item，index）=>
);

如果您有能力创建一个临时数组，您仍然可以使用

map

：

{
    new Array(this.props.level).fill(0).map((_, index) => (
        <span className='indent' key={index}></span>
    ))
}

{
新数组（this.props.level）.fill（0）.map（（\ux，index）=>(
))
}

这是因为

newarray（n）.fill（x）

创建了一个大小为

n

的数组，数组中填充了

x

，这有助于

映射

---

这很有效，而且非常简单，谢谢。是的，我知道您必须将返回值包装到容器中，我已经在这样做了，示例中缺少了返回值。在循环中添加键。键在react中很重要。我一直在寻找您life@ElgsQianChen这是不可能的。它必须用一些标记包装。如果{indents}返回一个包含内容的dom元素，那么它的okI不明白为什么在这个答案中提到map方法，因为它只适用于数组对象，问题明确指出不是这种情况。您也可以这样做：这看起来是最“反应”的方式。将值作为道具传递给另一个子组件。Thanks！这是一个很棒的！非常适合于render（）重html的情况。要使它更ES6，您可以使用

import React from“React”

和

export default Articles

这个答案甚至没有试图回答这个问题。问题很清楚，如何将

for循环

转换为可映射的数组（或对象）为了在React组件中呈现n个项目，而不具有项目数组。您的解决方案完全忽略了这一事实，并假设从props传递了一系列文章。您的回答对我有效，但仅在我添加了

chars&&…

和

.bind（此）

在我的函数末尾。我很好奇为什么仅仅是

对象…

（诸如此类）不起作用。我一直没有定义。这并不能回答问题，它明确地说没有要分析的对象数组，解释明确地说我想将for循环转换为映射，以便在React组件中进行渲染。您用数组替换了一个对象，这无助于回答问题，或者添加了任何其他值。这不回答问题，请在尝试回答之前阅读完整的问题。它帮助了我并节省了我的时间

{
    new Array(this.props.level).fill(0).map((_, index) => (
        <span className='indent' key={index}></span>
    ))
}