Προσπαθώ να κάνω κάτι σαν το ακόλουθο στο React JSX
(όπου το ObjectRow είναι ένα ξεχωριστό στοιχείο):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Αντιλαμβάνομαι και καταλαβαίνω γιατί αυτό δεν είναι'έγκυρο JSX
, αφού το JSX
αντιστοιχίζεται σε κλήσεις συναρτήσεων. Ωστόσο, προερχόμενος από τη γη των προτύπων και όντας νέος στο JSX
, δεν είμαι σίγουρος για το πώς θα πετύχω το παραπάνω (προσθήκη ενός συστατικού πολλές φορές).
Σκεφτείτε το σαν να καλείτε απλά συναρτήσεις JavaScript. Δεν μπορείτε να χρησιμοποιήσετε έναν βρόχο "for" όπου θα πήγαιναν τα ορίσματα μιας κλήσης συνάρτησης:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Δείτε πώς στη συνάρτηση tbody
περνάει ένας βρόχος for
ως όρισμα, και φυσικά αυτό'είναι συντακτικό λάθος.
Αλλά μπορείτε να φτιάξετε έναν πίνακα και στη συνέχεια να τον περάσετε ως όρισμα:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Μπορείτε να χρησιμοποιήσετε βασικά την ίδια δομή όταν εργάζεστε με JSX:
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>;
Παρεμπιπτόντως, το παράδειγμά μου σε JavaScript είναι σχεδόν ακριβώς αυτό στο οποίο μετατρέπεται αυτό το παράδειγμα του JSX. Παίξτε με το Babel REPL για να πάρετε μια ιδέα για το πώς λειτουργεί το JSX.
Δεν είμαι σίγουρος αν αυτό θα λειτουργήσει στην περίπτωσή σας, αλλά συχνά το map είναι μια καλή απάντηση.
Αν αυτός ήταν ο κώδικάς σας με τον βρόχο for:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Θα μπορούσατε να το γράψετε ως εξής με map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6 σύνταξη:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Ξέρω ότι αυτό είναι ένα παλιό νήμα, αλλά ίσως να θέλετε να ελέγξετε το React Templates, το οποίο σας επιτρέπει να χρησιμοποιήσετε πρότυπα τύπου jsx στο react, με μερικές οδηγίες (όπως το rt-repeat).
Το παράδειγμά σας, αν χρησιμοποιούσατε τα react-templates, θα ήταν:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>