Ένας από τους πιο απλούς τρόπους για να διαχωρίσετε δεδομένα από τα έγγραφά σας HTML είναι να τα αποθηκεύσετε σε JSON. Το JSON είναι δημοφιλές και εύκολο στην εργασία, ειδικά σε JavaScript.
Στο React, είναι λογικό να εξυπηρετούνται δεδομένα JSON μέσω πινάκων χρησιμοποιώντας ένα στοιχείο. Αυτό το στοιχείο θα μπορεί να δημιουργήσει έναν πίνακα που κλιμακώνεται με τα δεδομένα JSON. Ο πίνακας που προκύπτει μπορεί να έχει όσες σειρές χρειάζεται, καθώς τα δεδομένα δεν είναι κωδικοποιημένα.
Τι θα χρειαστείτε
Θα χρειαστείτε το Node.js εγκατεστημένο στον υπολογιστή σας για να ακολουθήσετε αυτό το σεμινάριο και μια βασική κατανόηση του τρόπου λειτουργίας του React.
Πριν δημιουργήσετε τον πίνακα, θα χρειαστεί δημιουργήστε ένα νέο έργο React αν δεν έχετε.
Δημιουργία των δεδομένων JSON
Ο πίνακας θα χρησιμοποιεί δεδομένα που είναι αποθηκευμένα σε ένα αρχείο JSON. Μπορείς ανακτήστε αυτά τα δεδομένα από ένα τελικό σημείο API σε μια πραγματική εφαρμογή.
Στον φάκελο src, δημιουργήστε ένα νέο αρχείο που ονομάζεται data.json και προσθέστε τα εξής:
[{
"ταυτότητα": 1,
"όνομα": "Έθελρεντ",
"επίθετο": "Αργά",
"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ": "[email protected]"
},{
"ταυτότητα": 2,
"όνομα": "Ρέτα",
"επίθετο": "Γούλμερ",
"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ": "[email protected]"
},{
"ταυτότητα": 3,
"όνομα": "Αραμπέλ",
"επίθετο": "Pestor",
"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ": "[email protected]"
}]
Αυτό είναι ένα απλό αρχείο JSON που περιέχει τρία αντικείμενα.
Τα κλειδιά αντικειμένων—το αναγνωριστικό, το όνομα, το επώνυμο και το email—είναι οι επικεφαλίδες, ενώ οι αντίστοιχες ιδιότητές τους αποτελούν το σώμα του πίνακα.
Δημιουργία του στοιχείου πίνακα
Δημιουργήστε ένα νέο αρχείο που ονομάζεται Table.js στον φάκελο src και προσθέστε τον παρακάτω κώδικα.
εξαγωγήΠροκαθορισμένολειτουργίαΤραπέζι({theadData, tbodyData}) {
ΕΠΙΣΤΡΟΦΗ (
<τραπέζι>
<το κεφάλι>
<tr>
// γραμμή κεφαλίδας
</tr>
</thead>
<το σώμα>
// δεδομένα σώματος
</tbody>
</table>
);
}
Αυτό το συστατικό λαμβάνει ως στηρίγματα τα theadData και tBodyData. Το theadData περιέχει τα δεδομένα που θα εμφανίσετε στη σειρά κεφαλίδας. Η εφαρμογή θα προμηθεύσει αυτά τα δεδομένα από το αρχείο JSON και θα τα παραδώσει στο στοιχείο του πίνακα.
Δημιουργήστε μια συνάρτηση στο App.js ονομάζεται getHeadings() και προσθέστε τα ακόλουθα.
συνθ getHeadings = () => {
ΕΠΙΣΤΡΟΦΗΑντικείμενο.keys (δεδομένα[0]);
}Δεδομένου ότι τα κλειδιά για κάθε αντικείμενο στο αρχείο JSON είναι παρόμοια, μπορείτε απλά να χρησιμοποιήσετε τα κλειδιά από το πρώτο αντικείμενο.
Θυμηθείτε να εισαγάγετε το data.json στο App.js.
εισαγωγή δεδομένα από "./data.json"
Όταν αποδίδετε το στοιχείο Πίνακας, μεταβιβάστε την επικεφαλίδα και τα δεδομένα JSON ως στηρίγματα.
<Πίνακας theadData={getHeadings()} tbodyData={data}/>Δημιουργία της γραμμής κεφαλίδας
Σε αυτό το βήμα, θα δημιουργήσετε ένα στοιχείο για την απόδοση ενός στοιχείου στη σειρά κεφαλίδας. Αυτό το στοιχείο θα επαναληφθεί πάνω από τις επικεφαλίδες χρησιμοποιώντας τη μέθοδο map().
Στο Table.js, προσθέστε τον κώδικα για επανάληψη πάνω από τις επικεφαλίδες μέσα στην ετικέτα thead.
<tr>
{theadData.map (επικεφαλίδα => {
ΕΠΙΣΤΡΟΦΗ <ου κλειδί={επικεφαλίδα}>{επικεφαλίδα}</th>
})}
</tr>Στη συνέχεια, θα συμπληρώσετε το σώμα του πίνακα.
Δημιουργία των σειρών σώματος
Το σώμα του πίνακα αποδίδει τα δεδομένα της σειράς. Δεδομένου ότι το Table.js λαμβάνει τα δεδομένα ως μια σειρά αντικειμένων, θα χρειαστεί να κάνετε επανάληψη πάνω του πρώτα για να πάρετε κάθε αντικείμενο που αντιπροσωπεύει μια σειρά.
Έτσι, στο Table.js, κάντε επανάληψη πάνω από το prop tBodyData ως εξής:
<το σώμα>
{tbodyData.map((σειρά, ευρετήριο) => {
ΕΠΙΣΤΡΟΦΗ <κλειδί tr={index}>
// δεδομένα σειράς
</tr>;
})}
</tbody>
Κάθε αντικείμενο σειράς θα είναι παρόμοιο με το παρακάτω παράδειγμα αντικειμένου.
συνθ σειρά = {
"ταυτότητα": 1,
"όνομα": "Έθελρεντ",
"επίθετο": "Αργά",
"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ": "[email protected]"
}
Για να εμφανίσετε καθένα από αυτά τα στοιχεία, θα χρειαστεί να επαναλάβετε τα πλήκτρα του αντικειμένου. Σε κάθε επανάληψη, θα ανακτήσετε την ιδιότητα που ταιριάζει με αυτό το κλειδί στο αντικείμενο της σειράς. Εφόσον αυτά τα κλειδιά είναι ίδια με τις επικεφαλίδες, χρησιμοποιήστε τις τιμές από το στηρίγμα theadData.
Τροποποιήστε την ετικέτα tr για να εμφανίσετε τα δεδομένα σειρών όπως φαίνεται παρακάτω.
<κλειδί tr={index}>
// theadData περιέχει τα κλειδιά
{theadData.map((κλειδί, ευρετήριο) => {
ΕΠΙΣΤΡΟΦΗ <κλειδί td={σειρά[κλειδί]}>{σειρά[κλειδί]}</td>
})}
</tr>;
Συνδυάζοντας τα πάντα, το στοιχείο του πίνακα θα πρέπει να μοιάζει με αυτό:
εξαγωγήΠροκαθορισμένολειτουργίαΤραπέζι({theadData, tbodyData}) {
ΕΠΙΣΤΡΟΦΗ (
<τραπέζι>
<το κεφάλι>
<tr>
{theadData.map (επικεφαλίδα => {
ΕΠΙΣΤΡΟΦΗ <ου κλειδί={επικεφαλίδα}>{επικεφαλίδα}</th>
})}
</tr>
</thead>
<το σώμα>
{tbodyData.map((σειρά, ευρετήριο) => {
ΕΠΙΣΤΡΟΦΗ <κλειδί tr={index}>
{theadData.map((κλειδί, ευρετήριο) => {
ΕΠΙΣΤΡΟΦΗ <κλειδί td={σειρά[κλειδί]}>{σειρά[κλειδί]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
Στο
στοιχείο, το στοιχείο επαναλαμβάνεται πάνω από τον πίνακα δεδομένων και επιστρέφει τη γραμμή του πίνακα για κάθε αντικείμενο.Χρήση του στοιχείου πίνακα
Εισαγάγετε τον πίνακα στο App.js και αποδώστε τον όπως φαίνεται παρακάτω:
εισαγωγή Τραπέζι από './Τραπέζι';
εισαγωγή δεδομένα από "./data.json"
λειτουργίαApp() {
συνθ getHeadings = () => {
ΕΠΙΣΤΡΟΦΗΑντικείμενο.keys (δεδομένα[0]);
}
ΕΠΙΣΤΡΟΦΗ (
<div className="δοχείο">
<Πίνακας theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Το στοιχείο του πίνακα λαμβάνει ως στηρίγματα theadData και tbodyData. Το theadData περιέχει τις επικεφαλίδες που δημιουργούνται από τα κλειδιά του πρώτου στοιχείου στα δεδομένα JSON και το tbodyData περιέχει ολόκληρο το αρχείο JSON.
Styling με μονάδες CSS
Δημιουργήσατε ένα στοιχείο πίνακα React από ένα αρχείο JSON σε αυτό το σεμινάριο. Μάθατε επίσης πώς μπορείτε να χειριστείτε τα δεδομένα JSON για να ταιριάζουν στις ανάγκες σας. Μπορείτε να βελτιώσετε την εμφάνιση του τραπεζιού σας προσθέτοντας κάποιο CSS σε αυτό. Για να δημιουργήσετε στυλ CSS με τοπικό εύρος, εξετάστε το ενδεχόμενο να χρησιμοποιήσετε μονάδες CSS. Είναι απλό στη χρήση και εύκολο να ξεκινήσετε εάν χρησιμοποιείτε μια εφαρμογή δημιουργίας-αντίδρασης-εφαρμογής.