I'm mencoba untuk mengkonversi jQuery komponen untuk React.js dan salah satu hal yang saya'm mengalami kesulitan dengan rendering n jumlah elemen didasarkan pada loop for.
Saya memahami hal ini tidak mungkin, atau dianjurkan dan yang mana sebuah array yang ada dalam model itu sangat masuk akal untuk menggunakan peta
. Yang's baik-baik saja, tapi bagaimana bila anda tidak memiliki sebuah array? Sebaliknya anda memiliki nilai numerik yang sama untuk sejumlah tertentu dari elemen untuk membuat, kemudian apa yang harus anda lakukan?
Berikut ini's contoh saya, saya ingin awalan sebuah elemen dengan jumlah sewenang-wenang span kategori berdasarkan it's tingkat hirarki. Jadi pada tingkat 3, saya ingin 3 rentang tags sebelum elemen teks.
Dalam javascript:
for (var i = 0; i < level; i++) {
$el.append('<span class="indent"></span>');
}
$el.append('Some text value');
Saya dapat't tampaknya untuk mendapatkan ini, atau sesuatu yang serupa untuk bekerja di BEJ React.js komponen. Sebaliknya, aku telah melakukan hal berikut, pertama membangun temp array dengan panjang yang benar dan kemudian perulangan array.
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"
...
);
}
Tentunya ini dapat't menjadi yang terbaik, atau-satunya cara untuk mencapai hal ini? Apa yang saya hilang?
Diperbarui: Sebagai Bereaksi > 0.16
Membuat metode tidak selalu harus kembali sebuah elemen tunggal. Array juga dapat dikembalikan.
var indents = [];
for (var i = 0; i < this.props.level; i++) {
indents.push(<span className='indent' key={i}></span>);
}
return indents;
ATAU
return this.props.level.map((item, index) => (
<span className="indent" key={index}>
{index}
</span>
));
Docs di sini menjelaskan tentang JSX anak-anak
LAMA:
Anda dapat menggunakan salah satu loop saja
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>
);
Anda juga dapat menggunakan .peta dan mewah es6
return (
<div>
{this.props.level.map((item, index) => (
<span className='indent' key={index} />
))}
"Some text value"
</div>
);
Juga, anda harus membungkus kembali nilai dalam sebuah wadah. Aku digunakan div dalam contoh di atas
Sebagai docs mengatakan di sini
Saat ini, dalam komponen's render, anda dapat kembali hanya satu node; jika anda memiliki, katakanlah, daftar divs untuk kembali, anda harus membungkus komponen-komponen dalam sebuah div, span atau komponen lain.
Di sini lebih fungsional misalnya dengan beberapa ES6 fitur:
'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;
I'm menggunakan Objek.kunci-kunci(karakter).peta(...)
loop di render
// 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.dari()
mengambil iterable objek untuk mengkonversi ke array dan opsional fungsi peta. Anda bisa membuat sebuah objek dengan .panjang
property sebagai berikut:
return Array.from({length: this.props.level}, (item, index) =>
<span className="indent" key={index}></span>
);
Saya pikir ini adalah cara termudah untuk loop dalam bereaksi js
<ul>
{yourarray.map((item)=><li>{item}</li>)}
</ul>