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

我正在尝试将一个jQuery组件转换为React.js，其中一个困难是根据for循环渲染n个元素。

我知道这是不可能的，或者说是不推荐的，如果模型中存在一个数组，那么使用map是完全有意义的。 这很好，但是当你没有数组的时候，怎么办？ 相反，你有一个数值，相当于一个给定的元素数量来渲染，那么你应该怎么做？

这是我的例子，我想根据一个元素的层次，用任意数量的span标签来给它加前缀。 因此，在第3层，我想在文本元素之前有3个跨度标签。

在javascript中。

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

我似乎不能让这个，或类似的东西在JJSX 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"
    ...
  );
}

当然，这不可能是最好的，或者说是唯一的方法来实现这个目标？ 我错过了什么？

Dmitry Shvedov
已编辑的问题 30日 一月 2016 в 10:04
编程
javascript jquery reactjs react-jsx
19日 三月 2015 в 3:49
3 种观点
解决办法

更新了。截止到React > 0.16。

渲染方法不一定要返回单个元素。一个数组也可以被返回。

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

这里有解释关于JJSX儿童的文件 。

旧：

你可以用一个循环来代替

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或任何其他组件中。

Dhiraj
编辑本段答案28日 二月 2018 в 10:39
评论(9)

这里有更多具有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;
评论(5)

我使用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>
    );
}
Mathdoy
编辑本段答案20日 一月 2016 в 7:24
评论(2)