Στην προηγούμενη ενότητα μάθαμε πως να δημιουργούμε το πρώτο μας React element χρησιμοποιώντας την μέθοδο React.createElement( ). 

 

 

Το πρόβλημα όμως που ερχόμαστε να αντιμετωπίσουμε είναι ότι συνήθως έχουμε περισσότερα από ένα element (όπως πχ ένα web link μέσα σε ένα μενού). Πως μπορούμε λοιπόν να δημιουργήσουμε πιο πολύπλοκα elements? Η απάντηση είναι απλή στην React: δημιουργώντας nesting elements.

Τώρα η ερώτηση είναι πως δημιουργούμε nesting elements. Ας συνεχίσουμε με το παράδειγμα που μόλις δημιουργήσαμε και το οποίο εμφανίζει ένα hyperlink στον browser. Αν προσέξετε την δομή της ReactDOM.render( ) μεθόδου θα παρατηρήσετε ότι δέχεται μόνο ένα element σαν πρώτη παράμετρο. Πως λοιπόν μπορούμε να εμφανίσουμε ταυτόχρονα δύο ή και περισσότερα hyperlinks στον browser?

Η απάντηση βρίσκεται στην χρήση κάπως ποιο ουδέτερων tags όπως το <div> και το <span>. Η θεωρία του React αναφέρει ότι μπορούμε να περάσουμε απεριόριστο αριθμό elements στο createElement( ). Όλες οι παράμετροι μετά τον δεύτερο μετατρέπονται σε child elements και λογικά βρίσκονται στο ίδιο επίπεδο

 

Ας αλλάξουμε λοιπόν τον κώδικα μας έτσι ώστε να δείχνει δύο ή και περισσότερα links στον browser.

 

 

Χρησιμοποιήσαμε τον ορισμό του createElement( ) για να καταφέρουμε το επιθυμητό αποτέλεσμα. Η θεωρία αναφέρει ότι αν ο τρίτος όρος του createElement( ) είναι string τότε υποδηλώνει την τιμή ή το κείμενο του element που πρόκειται να δημιουργηθεί. Στην γραμμή 8, στο πιο πάνω παράδειγμα, ο τρίτος όρος είναι ‘kassapoglou Blog’ το οποίο είναι string. Άρα θα είναι το κείμενο του element. Στο δεύτερο όμως createElement( ) (γραμμή 11) ο τρίτος και ο τέταρτος όρος είναι δεν είναι μέσα σε quotes άρα δεν είναι string. Οπότε το createElement( ) τα θεωρεί σαν child του div και τα κάνει render στον browser.

Μιχάλης Κασάπογλου

Michail.Kassapoglou@gmail.com