Bir jQuery bileşenini React.js'ye dönüştürmeye çalışıyorum ve zorlandığım şeylerden biri, bir for döngüsüne dayalı olarak n sayıda öğe oluşturmak.
Bunun mümkün olmadığını ya da önerilmediğini ve modelde bir dizi varsa map
kullanmanın tamamen mantıklı olduğunu anlıyorum. Bu iyi, ancak bir diziniz olmadığında ne olacak? Bunun yerine, işlenecek belirli sayıda öğeye eşit olan sayısal bir değere sahipseniz, o zaman ne yapmalısınız?
İşte benim örneğim, bir elemanın önüne hiyerarşik seviyesine bağlı olarak rastgele sayıda span etiketi eklemek istiyorum. Yani seviye 3'te, metin öğesinden önce 3 span etiketi istiyorum.
Javascript'te:
for (var i = 0; i < level; i++) {
$el.append('<span class="indent"></span>');
}
$el.append('Some text value');
Bunu ya da benzer bir şeyi JSX React.js bileşeninde çalıştıramıyorum. Bunun yerine, önce doğru uzunlukta bir temp dizisi oluşturmak ve ardından diziyi döngüye sokmak için aşağıdakileri yapmak zorunda kaldım.
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"
...
);
}
Bunu başarmanın en iyi ya da tek yolu bu olamaz mı? Neyi gözden kaçırıyorum?
Güncellendi: React > 0.16 itibariyle
Render yönteminin tek bir öğe döndürmesi gerekmez. Bir dizi de döndürülebilir.
var indents = [];
for (var i = 0; i < this.props.level; i++) {
indents.push(<span className='indent' key={i}></span>);
}
return indents;
VEYA
return this.props.level.map((item, index) => (
<span className="indent" key={index}>
{index}
</span>
));
Burada JSX çocukları hakkında açıklama yapan dokümanlar
ESKİ:
Bunun yerine bir döngü kullanabilirsiniz
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>
);
Ayrıca .map ve süslü es6 da kullanabilirsiniz
return (
<div>
{this.props.level.map((item, index) => (
<span className='indent' key={index} />
))}
"Some text value"
</div>
);
Ayrıca, dönüş değerini bir kapsayıcıya sarmanız gerekir. Yukarıdaki örnekte div kullandım
Dokümanlarda belirtildiği gibi burada
Şu anda, bir bileşenin render'ında yalnızca bir düğüm döndürebilirsiniz; örneğin, döndürülecek bir div listeniz varsa, bileşenlerinizi bir div, span veya başka bir bileşen içine sarmalısınız.
İşte bazı ES6 özellikleri ile daha işlevsel bir örnek:
'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;
Render'da döngü oluşturmak için Object.keys(chars).map(...)
kullanıyorum
// 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>
);
}