Sterowanie wejściami maszyny stanowej ExodeUI ze stanu React
Praktyczny przewodnik po odtwarzaniu pliku ExodeUI w React za pomocą pakietu exodeui: ustawianie wejść logicznych, liczbowych i wyzwalających ze stanu React oraz obsługa zdarzeń.
Rdzeń na wynos
Zainstaluj pakiet exodeui, wyrenderuj plik za pomocą <ExodeUICanvas> i pobierz silnik za pomocą haka useExodeUI, przekazując setEngine do onReady. Następnie wywołaj setInputBool, setInputNumber lub fireTrigger z efektów i procedur obsługi React, aby sterować maszyną stanu i nasłuchiwać zdarzeń za pomocą onTrigger. Twój stan React pozostaje źródłem prawdy; plik jest właścicielem ruchu.
Model: Twój kod jest właścicielem danych, plik jest właścicielem ruchu
Plik ExodeUI zawiera warstwy, stany, przejścia i wejścia, które przełączają się między nimi. Twój komponent React decyduje, kiedy te wejścia się zmieniają, na podstawie własnego stanu. Dzięki takiemu podziałowi kod animacji nie ma dostępu do komponentów i pozwala projektantom zmieniać ruch bez dotykania React.
Organizować coś
Zainstaluj środowisko wykonawcze React za pomocą npm zainstaluj exodeui. Jeśli używasz Vite, dodaj exodePlugin() z exodeui/vite-plugin do swojej konfiguracji Vite, aby można było bezpośrednio importować pliki .exode; w przeciwnym razie przekaż adres URL do pliku z właściwością src.
- Rekwizyty ExodeUICanvas: src (URL) lub obszar roboczy (importowane dane), dopasowanie, wyrównanie, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI zwraca setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger i getInputValue.
- Nazwy wejściowe muszą odpowiadać nazwom zdefiniowanym w pliku.
Wartości logiczne, liczby i wyzwalacze
Użyj wartości logicznej dla stanu, który pozostaje włączony, na przykład Ładowanie. Użyj liczby dla wartości ciągłych, takich jak postęp od 0 do 100. Użyj wyzwalacza dla jednorazowego momentu, takiego jak Sukces, który uruchamia się raz i resetuje. W React ustaw wartości logiczne i liczby w efekcie zależnym od stanu i uruchom wyzwalacze w procedurze obsługi, w której ma miejsce zdarzenie.
Wydarzenia z powrotem do React
Animacje mogą także informować Twój kod o tym, że coś się wydarzyło, na przykład, że naciśnięto przycisk wewnątrz pliku lub że animacja zakończyła się sukcesem. Obsługuj je za pomocą onTrigger, który otrzymuje nazwę wyzwalacza, i przechowuj prawdziwą pracę, taką jak wywołania API, w kodzie React.
Testowanie i dostępność
Ponieważ ruch jest sterowany przez wejścia, można przetestować stronę React, sprawdzając, które wejścia są ustawione dla każdego stanu. Zachowaj prawdziwe przyciski i etykiety w DOM lub użyj komponentu ExodeSEO, który może wygenerować wizualnie ukrytą warstwę HTML dla czytników ekranu. Przekaż wartość logiczną o zmniejszonym ruchu z ustawień systemowych użytkownika, jeśli plik ją definiuje.
Fragment wdrożenia produkcyjnego
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>
);
}Klucz Principles do zapamiętania
- Renderuj za pomocą ExodeUICanvas i przekaż setEngine z useExodeUI do onReady
- Wartości logiczne dla stanów bieżących, liczby dla wartości ciągłych, wyzwalacze dla chwil
- Ustaw dane wejściowe z efektów i procedur obsługi React; Stan React pozostaje źródłem prawdy
- Obsługuj zdarzenia z pliku za pomocą onTrigger
- Zachowaj logikę aplikacji w React, ruch w pliku
Często zadawane pytania
Źródła
- exodeui (React runtime) — npm