React JSX
de (ObjectRow'ın ayrı bir bileşen olduğu) aşağıdaki gibi bir şey yapmaya çalışıyorum:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Bunun neden geçerli bir JSX
olmadığını anlıyorum, çünkü JSX
fonksiyon çağrılarıyla eşleşiyor. Ancak, şablon dünyasından geldiğim ve JSX
de yeni olduğum için, yukarıdakileri nasıl başaracağımdan emin değilim (bir bileşeni birden çok kez eklemek).
Bunu sadece JavaScript fonksiyonlarını çağırıyormuşsunuz gibi düşünün. Bir fonksiyon çağrısının argümanlarının gideceği yerde bir for
döngüsü kullanamazsınız:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Fonksiyon tbody
nin argüman olarak nasıl bir for
döngüsü geçirdiğini görün ve tabii ki bu bir sözdizimi hatasıdır.
Ancak bir dizi oluşturabilir ve ardından bunu bir argüman olarak iletebilirsiniz:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
JSX ile çalışırken temelde aynı yapıyı kullanabilirsiniz:
var rows = [];
for (var i = 0; i < numrows; i++) {
// note: we add a key prop here to allow react to uniquely identify each
// element in this array. see: https://reactjs.org/docs/lists-and-keys.html
rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
Bu arada, benim JavaScript örneğim neredeyse tam olarak JSX örneğinin dönüştüğü şeydir. JSX'in nasıl çalıştığına dair bir fikir edinmek için Babel REPL ile oynayın.
Bunun sizin durumunuzda işe yarayıp yaramayacağından emin değilim, ancak genellikle map iyi bir yanıttır.
Eğer bu sizin for döngüsü içeren kodunuz olsaydı:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Bunu map ile şu şekilde yazabilirsiniz:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6 sözdizimi:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Bunun eski bir konu olduğunu biliyorum, ancak birkaç yönerge (rt-repeat gibi) ile react'te jsx tarzı şablonları kullanmanıza izin veren React Templates'e göz atmak isteyebilirsiniz.
Eğer react-templates kullansaydınız örneğiniz şöyle olurdu:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>