如何重構在 react js 中傳遞的道具數據？

Question

我將數據道具傳遞給兩個完全相同的組件：

export default function Home({ data }) {
    return (
        <Layout title="Home Page">
                    <CarouselMobile
                        aig={data.aig}
                        audi={data.audi}
                        bt={data.bt}
                        francetelecom={data.francetelecom}
                        hkt={data.hkt}
                        kelly={data.kelly}
                        mobinnet={data.mobinnet}
                        orange={data.orange}
                        pccw={data.pccw}
                        sap={data.sap}
                        tata={data.tata}
                        teleperformance={data.teleperformance}
                        wf={data.wf}
                    />
                    <CarouselDesktop
                        aig={data.aig}
                        audi={data.audi}
                        bt={data.bt}
                        francetelecom={data.francetelecom}
                        hkt={data.hkt}
                        kelly={data.kelly}
                        mobinnet={data.mobinnet}
                        orange={data.orange}
                        pccw={data.pccw}
                        sap={data.sap}
                        tata={data.tata}
                        teleperformance={data.teleperformance}
                        wf={data.wf}
                    />
        </Layout>
    );
}

如何重構傳遞給兩個組件的數據代碼，使其看起來不那么混亂？

Answer 1

如果名稱相同，只需傳播它。

<CarouselMobile {...data} />
<CarouselDesktop {...data} />

如果沒有，您也可以在數據 object 和組件中部分傳播具有相同名稱的道具，並應用具有不同名稱的其他道具。

<CarouselMobile {...data} differentProp={differentProp} />
<CarouselDesktop {...data} anotherDifferentProp={anotherDifferentProp} />

或者根據評論，您也可以像下面這樣傳遞整個data object。

<CarouselMobile data={data} />

但這里的重點是，您將使用data.aig訪問CarouselMobile中的屬性，例如如下所示。

const CarouselMobile = ({ data }) => {
  const { aig, audi, /* other props */ } = data; 
};

Answer 2

在這里，您可以使用這些道具創建一個通用 object 並將該 object 發送到兩個組件。

或者您可以將data道具發送到組件並直接在那里使用。

另一種方法是使用擴展運算符發送數據道具。