升級到 4.x version

從 v0 到 v4 中，發生了一些變化。

除了從業務邏輯上進行拆分之外，為了讓參數和範圍更加清晰，還需要進行相應的改變

BearSlideItem

拆分成不同的組件是為了更好區分 Props

v0

import {BearSlideItem} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        children: <BearSlideItem as="card">  {/* or image **/}
            {row.name}
        </BearSlideItem>
    }
});

v4.x 改成這樣

import {BearSlideCard, BearSlideImage} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        children: <BearSlideCard>   {/* or BearSlideImage **/}
            {row.name}
        </BearSlideCard>
    }
});

想知道更詳細的參數，可以參考 BearSlideCard 和 BearSlideImage

PageContent

舊的 BearSlideItem，因為這應該是一個頁面，而不是一個項目

import BearCarousel, {BearSlideItem} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        pageContent: <>{row.name}</>,
        children: <BearSlideItem as="card">  {/* or image **/}
            {row.name}
        </BearSlideItem>
    }
});

改成這樣

import BearCarousel, {BearSlideItem} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        children: <BearSlideCard>   {/* or BearSlideImage **/}
            {row.name}
        </BearSlideCard>
    }
});

<BearCarousel
    data={data}
    isEnablePageContent
    renderPagination={(pageTotal: number) => {
        return foodImages.map(row => {
            return <CustomPage key={row.id}>{row.title}</CustomPage>;
        });
    }}
/>

想知道更詳細的參數，可以參考 auto-play-progress

Height

這個屬性應該是兩者之一，所以我將它合併到同一個屬性中

staticHeight -> height
aspectRatio -> height

Static Height

<BearCarousel
    data={data}
    staticHeight="200px"
/>

改成這樣

<BearCarousel
    data={data}
    height="200px"
/>

AspectRatio

<BearCarousel
    data={data}
    aspectRatio={{widthRatio: 32, heightRatio: 9}}
/>

改成這樣

<BearCarousel
    data={data}
    height={{widthRatio: 32, heightRatio: 9}}
/>

Status status dataset

[data-active="true"]{...}
[data-first-page="true"]{...}
[data-last-page="true"]{...}

改成這樣

[data-active]{...}
[data-first-page]{...}
[data-last-page]{...}