Controlarea intrărilor aparatului de stat ExodeUI de la starea React
Un ghid practic pentru redarea unui fișier ExodeUI în React cu pachetul exodeui: setarea intrărilor booleene, numerice și declanșatoare din starea React și gestionarea evenimentelor.
Core Takeaway
Instalați pachetul exodeui, randați fișierul cu <ExodeUICanvas> și obțineți motorul cu cârligul useExodeUI trecând setEngine la onReady. Apoi apelați setInputBool, setInputNumber sau fireTrigger de la efectele și handlerele React pentru a conduce mașina de stări și ascultați evenimentele cu onTrigger. Starea dumneavoastră React rămâne sursa adevărului; dosarul deține moțiunea.
Modelul: codul dvs. deține date, fișierul deține mișcare
Un fișier ExodeUI conține straturi, stări, tranziții și intrările care comută între ele. Componenta dvs. React decide când se schimbă acele intrări, pe baza propriei stări. Această împărțire ține codul de animație departe de componentele dvs. și permite designerilor să schimbe mișcarea fără a atinge React.
Înființat
Instalați runtime-ul React cu npm instalați exodeui. Dacă utilizați Vite, adăugați exodePlugin() din exodeui/vite-plugin la configurația Vite, astfel încât fișierele .exode să poată fi importate direct; în caz contrar, trimiteți o adresă URL la fișierul cu prop src.
- ExodeUIProcess Canvas: src (URL) sau artboard (date importate), potrivire, aliniere, redare automată, onReady, onTrigger, onInputUpdate.
- useExodeUI returnează setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger și getInputValue.
- Numele de intrare trebuie să se potrivească cu numele definite în fișier.
Booleeni, numere și declanșatoare
Utilizați un boolean pentru o stare care rămâne activată, cum ar fi Încărcare. Utilizați un număr pentru valori continue, cum ar fi progresul de la 0 la 100. Folosiți un declanșator pentru un moment unic, cum ar fi succes, care se declanșează o dată și se resetează. În React, setați booleani și numere într-un efect care depinde de stare și declanșează declanșatorul în handler unde are loc evenimentul.
Evenimente înapoi la React
De asemenea, animațiile pot spune codului dvs. că s-a întâmplat ceva, de exemplu că a fost apăsat un buton din interiorul fișierului sau s-a terminat o animație de succes. Gestionați-le cu onTrigger, care primește numele declanșatorului și păstrați munca reală, cum ar fi apelurile API, în codul dvs. React.
Testare și accesibilitate
Deoarece mișcarea este condusă de intrări, puteți testa partea React verificând ce intrări sunt setate pentru fiecare stare. Păstrați butoanele și etichetele reale în DOM sau utilizați componenta ExodeSEO, care poate genera un strat HTML ascuns vizual pentru cititoarele de ecran. Treceți un boolean cu mișcare redusă din setarea de sistem a utilizatorului dacă fișierul dvs. definește unul.
Fragment de implementare a producției
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>
);
}Cheie Principles de reținut
- Redați cu ExodeUICanvas și treceți setEngine de la useExodeUI la onReady
- Booleeni pentru stări în curs, numere pentru valori continue, declanșatoare pentru momente
- Setați intrări de la efectele și handlerele React; Starea React rămâne sursa adevărului
- Gestionați evenimentele din fișier cu onTrigger
- Păstrați logica aplicației în React, mișcare în fișier
Întrebări frecvente
Surse
- exodeui (React runtime) — npm