Props kolleksiyasi (Props collections)

Ko’pincha bir nechta prop’larni birga to’plashimiz kerak bo’ladi. Masalan, “sudrab tashlash” (drag-and-drop) foydalanuvchi interfeyslarini yaratishda bir qancha prop’larni boshqarish talab qilinadi:

onDragStart: foydalanuvchi elementni sudrashni boshlaganda brauzerga nima qilish kerakligini bildirish uchun
onDragOver: tushirilishi mumkin bo’lgan zona(dropzone)ni aniqlash uchun
onDrop: element bu zonaga tushirilganda qandaydir kodni bajarish uchun
onDragEnd: element sudrab olib bo’lgandan keyin brauzerga nima qilish kerakligini bildirish uchun

Bundan tashqari, ma’lumotlar yoki elementlar boshqa elementlarga default holatda tushirilishi mumkin emas. Bir elementning boshqasiga tushirilishini ta’minlash uchun, biz onDragOver hodisasi uchun event.preventDefault metodini chaqirib, elementning default holatda ishlov berishini oldini olishimiz kerak.

Ushbu prop’lar odatda birga qo’llaniladi va onDragOver odatda quyidagi kabi ishlatiladi: event => { event.preventDefault(); moreStuff(); }, shuning uchun biz bu prop’larni birga to’plab, turli komponentlarda qayta ishlatishimiz mumkin:

export const droppableProps = {
    onDragOver: (event) => {
        event.preventDefault();
    },
    onDrop: (event) => {},
};
 
export const draggableProps = {
    onDragStart: (event) => {},
    onDragEnd: (event) => {},
};

Endi, agar biz React komponentini tushirilishi mumkin bo’lgan zona kabi ishlashini kutayotgan bo’lsak, bu prop kolleksiyasini quyidagicha ishlatishimiz mumkin:

<Dropzone {...droppableProps} />

Bu — Prop collection pattern’i bo’lib, bir nechta prop’larni qayta ishlatiladigan qiladi. Bu pattern ko’pincha foydalanish imkoniyati qulayligi(accessibility)ni oshirish sohasida keng qo’llaniladi, masalan, foydalanish imkoniyati qulayligiga ega komponentlarda bir qator aria-* prop’larni kiritish uchun. Shunga qaramay, hali ham bir muammo mavjud, agar biz o’zimizning maxsus onDragOver prop’imizni yozsak va kolleksiyani bekor qilsak, kolleksiyadan avtomatik kelgan event.preventDefault chaqiruvini yo’qotamiz.

Bu kutilmagan xatti-harakatlarga olib kelishi mumkin, va komponentni Dropzonega tushirish imkoniyatini yo’qotadi:

<Dropzone
    {...droppableProps}
    onDragOver={() => {
        alert("Dragged!");
    }}
/>

Yaxshiyamki, biz bu muammoni prop getters yordamida tuzatishimiz mumkin.

Props oluvchilar (Prop getters)

Prop getter’lari aslida prop kolleksiyalarini maxsus prop’lar bilan kompozitsiya qiladi va ularni birga birlashtiradi. Bizning misolimizda, droppableProps kolleksiyasidagi onDragOver hodisa ishlov beruvchisidagi event.preventDefault chaqiruvini saqlab qolishni va unga maxsus alert("Dragged!"); chaqiruvini qo’shishni xohlaymiz. Buni prop getter’lari yordamida amalga oshirishimiz mumkin.

Birinchi navbatda, droppableProps kolleksiyasini prop getter’ga o’zgartiramiz:

export const getDroppableProps = () => {
    return {
        onDragOver: (event) => {
            event.preventDefault();
        },
        onDrop: (event) => {},
    };
};

Bu yerda prop kolleksiyasini eksport qilgan joyimizdan tashqari hech narsa o’zgarmagan, endi biz prop kolleksiyalarini qaytaradigan funksiya eksport qilamiz, bu prop getter’dir Chunki bu funksiya bo’lgani tufayli, u argumentlarni qabul qilishi mumkin, masalan, maxsus onDragOver funksiyasi. Biz bu maxsus onDragOverni bizning default bo’yicha onDragOver bilan quyidagicha birlashtira olamiz:

const compose =
    (...functions) =>
    (...args) =>
        functions.forEach((fn) => fn?.(...args));
 
export const getDroppableProps = ({
    onDragOver: replacementOnDragOver,
    ...replacementProps
}) => {
    const defaultOnDragOver = (event) => {
        event.preventDefault();
    };
 
    return {
        onDragOver: compose(replacementOnDragOver, defaultOnDragOver),
        onDrop: (event) => {},
        ...replacementProps,
    };
};

Endi biz prop getter’ni quyidagicha ishlatishimiz mumkin:

<Dropzone
    {...getDroppableProps({
        onDragOver: () => {
            alert("Dragged!");
        },
    })}
/>

Bu moslashtirilgan onDragOver bizning default bo’yicha onDragOverga birikadi, va ikkita narsa sodir bo’ladi: event.preventDefault() va alert("Dragged!"). Bu prop getter pattern’idir.

Boshqaruvchi props’lar Birlashgan komponentlar