如何循环和渲染React.js中的元素，而无需映射对象数组？
我试图将一个jQuery组件转换为React.js，而我遇到的一个难题是基于for循环渲染n个元素。
我知道这是不可能的，或build议，并且在模型中存在数组时，使用map是非常有意义的。 没关系，但是如果你没有arrays呢？ 相反，你有数值，相当于给定数量的元素渲染，那么你应该怎么做？
这里是我的例子，我想根据它的层级在一个元素前加一个任意数量的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组件中工作的东西。 相反，我必须做到以下几点，首先build立一个临时数组到正确的长度，然后循环数组。
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" ... ); }
当然，这不可能是最好的，或者唯一的方法来实现呢？ 我错过了什么？
您可以改用一个循环
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或任何其他组件中。
以下是一些ES6function的更多function示例：
'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;
我使用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> ); }
下面是另一种语法
我发现自己使用这个片段很多，列表项，jsx和胖箭头：
return ( { obj && <ul className={styles.obj}> { Object.keys(obj).map((k, index) => <li key={index}>{ `${k}: ${obj[k]}` }</li>) } </ul> } )
