更新輪播卡片內容

如果想要改變幻燈片項的內容，比如改變某個值的顯示切換，可以選擇在 key 中加入一些參數，或者開啟 isSlideItemMemo 模式，使用 useMemo deps 來判斷是否重新渲染

使用 Key Cache

Tip

這是 預設的的緩存模式，它會根據所有的 key值 來決定是否重新生成 slideItem，因為我們不想在 slide index 發生變化時重新生成 SlideItem，但是又需要更新 SlideItem

const StateCarousel = () => {
    const [activeId, setActiveId] = React.useState(0);

    const myData = images.map(row => {
        const isActive = row.id === activeId;
        return <AcroolSlideImage
            key={row.id}
            imageUrl={row.image}
            onClick={() => setActiveId(row.id)}
            style={isActive ? {transition: 'filter .4s', filter: 'blur(4px)'}: undefined}
        />
    });

    return <AcroolCarousel
        // ...ignore some
        data={myData}
    />
}

使用 Memo Cache

如果你不想弄亂 Key，你可以使用 useMemo 的 deps

import {AcroolSlideCard} from '@acrool/react-carousel';
const StateCarousel = () => {
    const [activeId, setActiveId] = React.useState(0);

    const myData = () => images.map(row => {
        const isActive = row.id === activeId;
        return <AcroolSlideImage
             key={row.id}
             imageUrl={row.image}
             onClick={() => setActiveId(row.id)}
             style={isActive ? {transition: 'filter .4s', filter: 'blur(4px)'}: undefined}
        />;
    }), [activeId]);

    return <AcroolCarousel
        // ...ignore some
        data={myData}
        isSlideItemMemo
    />
}

試試看點擊輪播項目？

important

如果您不希望滑動動作觸發 slideItem 的 onclick事件，請將 onClick 放在 AcroolSlideCard 或 AcroolSlideImage 上