我正在尝试将一个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"
...
);
}
当然,这不可能是最好的,或者说是唯一的方法来实现这个目标? 我错过了什么?
更新了。截止到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>
));
旧:
你可以用一个循环来代替
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或任何其他组件中。
这里有更多具有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;
我使用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>
);
}