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

Question

我正在尝试将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组件中实现这一点或任何类似的功能。相反，我必须执行以下操作，首先构建一个长度正确的临时数组，然后循环数组。

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

这肯定不是最好的，或者是实现这一目标的唯一方法？我错过了什么？

Answer 1

Array.from（）将一个iterable对象转换为一个数组和一个可选的映射函数。您可以创建具有.length属性的对象，如下所示：

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

Answer 2

下面是一些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;

Answer 3

更新：截至

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

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

或

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

文档在这里解释关于JSX孩子

旧的：

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

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>
);

你也可以使用. map和花式es6

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

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

正如医生在这里说的

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