如何循环和呈现 React.js 中的元素而不映射对象数组？

我正在尝试将一个 jQuery 组件转换为 React.js，我遇到的一个困难是基于 for 循环呈现 n 个元素。

我明白这是不可能的，或推荐的，并且在模型中存在数组的地方，使用 map是完全有意义的。这很好，但是当您没有数组时该怎么办呢？取而代之的是数值，它等于要呈现的给定数量的元素，那么应该怎么做呢？

这是我的例子，我想给一个元素加上任意数量的 span 标签，这些标签基于元素的层次结构。所以在第3级，我希望在 text 元素之前有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"
...
);
}

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

409576 次浏览
小开
最佳答案

更新: 截至 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>
));

这里的文档解释了 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>
);

您也可以使用 地图和花哨的 es6

return (
<div>
{this.props.level.map((item, index) => (
<span className='indent' key={index} />
))}
"Some text value"
</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>
);
}
小开

下面是一个带有 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;
小开

我认为这是最简单的方法来循环反应 js

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

Array.from() 接受一个可迭代的对象来转换为一个数组和一个可选的 map 函数。您可以创建一个具有 .length属性的对象，如下所示:

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

如果可以使用 买得起创建临时数组，那么仍然可以使用 map:

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

这是因为 new Array(n).fill(x)创建了一个大小为 n的数组，其中填充了 x，这可以帮助 map。

array-fill


提交答案