如何在没有要映射的对象数组的情况下在React.js中循环和渲染元素？
如何在没有要映射的对象数组的情况下在React.js中循环和渲染元素？
提问于 2015-03-19 23:49:46
我正在尝试将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"
...
);
}这肯定不是最好的，或者是实现这一目标的唯一方法？我遗漏了什么？
回答 4
Stack Overflow用户
发布于 2016-05-31 19:11:11
下面是包含一些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;Stack Overflow用户
发布于 2018-05-05 05:40:32
Array.from()接受一个可迭代的对象来转换为一个数组和一个可选的映射函数。您可以创建具有.length属性的对象，如下所示：
return Array.from({length: this.props.level}, (item, index) =>
<span className="indent" key={index}></span>
);Stack Overflow用户
发布于 2016-01-21 03:12:18
我正在使用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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29149169
复制相关文章
相似问题