Kiểm soát đầu vào máy trạng thái ExodeUI từ trạng thái React
Hướng dẫn thực tế để phát tệp ExodeUI trong React với gói exodeui: đặt đầu vào boolean, số và kích hoạt từ trạng thái React và xử lý các sự kiện.
Điểm chính
Cài đặt gói exodeui, kết xuất tệp bằng <ExodeUICanvas> và lấy công cụ có hook useExodeUI bằng cách chuyển setEngine tới onReady. Sau đó gọi setInputBool, setInputNumber hoặc fireTrigger từ các hiệu ứng và trình xử lý React để điều khiển máy trạng thái và lắng nghe các sự kiện bằng onTrigger. Trạng thái React của bạn vẫn là nguồn gốc của sự thật; tập tin sở hữu chuyển động.
Mô hình: mã của bạn sở hữu dữ liệu, tệp sở hữu chuyển động
Tệp ExodeUI chứa các lớp, trạng thái, chuyển tiếp và đầu vào chuyển đổi giữa chúng. Thành phần React của bạn quyết định thời điểm những đầu vào đó thay đổi, dựa trên trạng thái của chính nó. Sự phân chia đó giúp mã hoạt ảnh không lọt vào các thành phần của bạn và cho phép các nhà thiết kế thay đổi chuyển động mà không cần chạm vào React.
Cài đặt
Cài đặt thời gian chạy React với npm cài đặt exodeui. Nếu bạn sử dụng Vite, hãy thêm exodePlugin() từ exodeui/vite-plugin vào cấu hình Vite của bạn để có thể nhập trực tiếp các tệp .exode; nếu không thì chuyển URL tới tệp có prop src.
- Đạo cụ ExodeUICanvas: src (URL) hoặc artboard (dữ liệu đã nhập), fit, Alignment, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI trả về setEngine cộng với setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger và getInputValue.
- Tên đầu vào phải khớp với tên được xác định trong tệp.
Boolean, số và trình kích hoạt
Sử dụng boolean cho trạng thái duy trì, chẳng hạn như Đang tải. Sử dụng một số cho các giá trị liên tục, chẳng hạn như tiến trình từ 0 đến 100. Sử dụng trình kích hoạt cho một thời điểm chỉ xảy ra, chẳng hạn như Thành công, kích hoạt một lần và đặt lại. Trong React, đặt các giá trị boolean và số trong một hiệu ứng phụ thuộc vào trạng thái và kích hoạt trình kích hoạt trong trình xử lý nơi sự kiện xảy ra.
Sự kiện quay lại React
Hoạt ảnh cũng có thể cho mã của bạn biết điều gì đó đã xảy ra, chẳng hạn như một nút bên trong tệp đã được nhấn hoặc hoạt ảnh thành công đã hoàn tất. Xử lý những vấn đề này bằng onTrigger, nhận tên trình kích hoạt và giữ công việc thực sự, chẳng hạn như lệnh gọi API, trong mã React của bạn.
Kiểm tra và khả năng tiếp cận
Vì chuyển động được điều khiển bởi đầu vào nên bạn có thể kiểm tra phía React bằng cách kiểm tra xem đầu vào nào được đặt cho từng trạng thái. Giữ các nút và nhãn thực trong DOM hoặc sử dụng thành phần ExodeSEO, thành phần này có thể tạo lớp HTML ẩn trực quan cho trình đọc màn hình. Truyền một boolean chuyển động giảm từ cài đặt hệ thống của người dùng nếu tệp của bạn xác định một boolean chuyển động giảm.
Đoạn mã triển khai thực tế
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>
);
}Nguyên tắc chính cần nhớ
- Kết xuất bằng ExodeUICanvas và chuyển setEngine từ useExodeUI sang onReady
- Boolean cho các trạng thái đang diễn ra, số cho các giá trị liên tục, kích hoạt cho các khoảnh khắc
- Đặt đầu vào từ các hiệu ứng và trình xử lý React; Trạng thái React vẫn là nguồn gốc của sự thật
- Xử lý các sự kiện từ tệp bằng onTrigger
- Giữ logic ứng dụng trong React, chuyển động trong tệp
Câu hỏi thường gặp
Nguồn
- exodeui (React runtime) — npm