Έλεγχος εισόδων μηχανής κατάστασης ExodeUI από την κατάσταση React
Ένας πρακτικός οδηγός για την αναπαραγωγή ενός αρχείου ExodeUI στο React με το πακέτο exodeui: ρύθμιση εισόδων boolean, αριθμού και ενεργοποίησης από την κατάσταση React και χειρισμός συμβάντων.
Core Takeaway
Εγκαταστήστε το πακέτο exodeui, αποδώστε το αρχείο με <ExodeUICanvas> και αποκτήστε τον κινητήρα με το άγκιστρο useExodeUI περνώντας το setEngine στο onReady. Στη συνέχεια, καλέστε τα setInputBool, setInputNumber ή fireTrigger από τα εφέ και τους χειριστές React για να οδηγήσετε το μηχάνημα κατάστασης και να ακούσετε συμβάντα με το onTrigger. Η κατάστασή σας React παραμένει η πηγή της αλήθειας. το αρχείο κατέχει την κίνηση.
Το μοντέλο: ο κώδικάς σας κατέχει δεδομένα, το αρχείο κατέχει την κίνηση
Ένα αρχείο ExodeUI περιέχει επίπεδα, καταστάσεις, μεταβάσεις και τις εισόδους που εναλλάσσονται μεταξύ τους. Το στοιχείο React αποφασίζει πότε αλλάζουν αυτές οι είσοδοι, με βάση τη δική του κατάσταση. Αυτός ο διαχωρισμός κρατά τον κώδικα κινούμενων εικόνων έξω από τα στοιχεία σας και επιτρέπει στους σχεδιαστές να αλλάζουν την κίνηση χωρίς να αγγίζουν το React.
Ρύθμιση
Εγκαταστήστε το χρόνο εκτέλεσης React με εγκατάσταση npm exodeui. Εάν χρησιμοποιείτε Vite, προσθέστε το exodePlugin() από το exodeui/vite-plugin στη διαμόρφωση Vite, ώστε τα αρχεία .exode να μπορούν να εισαχθούν απευθείας. Διαφορετικά, περάστε μια διεύθυνση URL στο αρχείο με το src prop.
- ExodeUIΚάνβας στηρίγματα: src (URL) ή πίνακας γραφικών (εισαγόμενα δεδομένα), προσαρμογή, ευθυγράμμιση, αυτόματη αναπαραγωγή, onReady, onTrigger, onInputUpdate.
- useExodeUI επιστρέφει setEngine συν setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger και getInputValue.
- Τα ονόματα εισόδου πρέπει να ταιριάζουν με τα ονόματα που ορίζονται στο αρχείο.
Booleans, αριθμοί και ενεργοποιητές
Χρησιμοποιήστε ένα boolean για μια κατάσταση που παραμένει ενεργοποιημένη, όπως η φόρτωση. Χρησιμοποιήστε έναν αριθμό για συνεχείς τιμές, όπως η πρόοδος από το 0 έως το 100. Χρησιμοποιήστε ένα έναυσμα για μια μοναδική στιγμή, όπως το Success, το οποίο ενεργοποιείται μία φορά και γίνεται επαναφορά. Στο React, ορίστε booleans και αριθμούς σε ένα εφέ που εξαρτάται από την κατάσταση, και ενεργοποιήστε τα ερεθίσματα στο πρόγραμμα χειρισμού όπου συμβαίνει το συμβάν.
Γεγονότα πίσω στο React
Τα κινούμενα σχέδια μπορούν επίσης να πουν στον κώδικά σας ότι κάτι συνέβη, για παράδειγμα ότι πατήθηκε ένα κουμπί μέσα στο αρχείο ή ότι ολοκληρώθηκε μια επιτυχής κινούμενη εικόνα. Χειριστείτε τα με το onTrigger, το οποίο λαμβάνει το όνομα του κανόνα ετικέτας, και διατηρήστε την πραγματική εργασία, όπως οι κλήσεις API, στον κωδικό React.
Δοκιμές και προσβασιμότητα
Επειδή η κίνηση καθοδηγείται από εισόδους, μπορείτε να δοκιμάσετε την πλευρά React ελέγχοντας ποιες είσοδοι έχουν οριστεί για κάθε κατάσταση. Διατηρήστε πραγματικά κουμπιά και ετικέτες στο DOM ή χρησιμοποιήστε το στοιχείο ExodeSEO, το οποίο μπορεί να δημιουργήσει ένα οπτικά κρυφό επίπεδο HTML για προγράμματα ανάγνωσης οθόνης. Περάστε ένα boolean μειωμένης κίνησης από τη ρύθμιση συστήματος του χρήστη, εάν το αρχείο σας ορίζει ένα.
Απόσπασμα υλοποίησης παραγωγής
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // needs exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, progress, justSaved, onSave }) {
const { setEngine, setInputBool, setInputNumber, fireTrigger } = useExodeUI();
// Boolean: a state that stays on while saving
useEffect(() => { setInputBool('Loading', saving); }, [saving, setInputBool]);
// Number: continuous progress, 0 to 100
useEffect(() => { setInputNumber('Progress', progress); }, [progress, setInputNumber]);
// Trigger: a one-off moment
useEffect(() => { if (justSaved) fireTrigger('Success'); }, [justSaved, fireTrigger]);
return (
<div style={{ width: 240, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => { if (name === 'Pressed') onSave(); }}
/>
</div>
);
}Κλειδί Principles για να θυμάστε
- Κάντε απόδοση με ExodeUICanvas και περάστε το setEngine από useExodeUI στο onReady
- Booleans για συνεχείς καταστάσεις, αριθμοί για συνεχείς τιμές, ενεργοποιητές για στιγμές
- Ορίστε εισόδους από εφέ React και χειριστές. Η κατάσταση React παραμένει η πηγή της αλήθειας
- Χειριστείτε συμβάντα από το αρχείο με το onTrigger
- Διατηρήστε τη λογική της εφαρμογής στο React, κίνηση στο αρχείο
Συχνές Ερωτήσεις
Πηγές
- exodeui (React runtime) — npm