我正在尝试将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"
...
);
}
当然,这不是最好的方法还是唯一的方法?我想念什么?
更新:从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和fancy 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>
);
}
Array.from()
使用一个可迭代的对象将其转换为数组和一个可选的map函数。您可以使用以下.length
属性创建一个对象:
return Array.from({length: this.props.level}, (item, index) =>
<span className="indent" key={index}></span>
);
我认为这是在React js中循环的最简单方法
<ul>
{yourarray.map((item)=><li>{item}</li>)}
</ul>
本文地址:http://javascript.askforanswer.com/ruhezaimeiyouyaoyingshededuixiangshuzudeqingkuangxiaxunhuanhexuanranreact-jszhongdeyuansu.html
文章标签:javascript , jquery , react-jsx , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:javascript , jquery , react-jsx , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!