我正在創建一個選擇你自己的冒險瀏覽器游戲。我已經意識到我想要填充頁面的所有大部分資料（選擇、選擇等......）我想從我的 JSON 中提取并動態填充頁面。
盡管如此，我仍需要創建組件檔案，以便能夠創建指向組件位置的鉤子路由。
我確信有一種方法可以動態地執行此操作（而不是手動創建每個元素），但我對 react 還很陌生，而且它并沒有出現在我的腦海中。我很樂意在這件事上提供任何幫助。
頁面示例代碼：
import React from "react";
import Navigation from "components/Navigation/Navigation";
const Page1 = () => {
return (
<>
Page 1
<Navigation room={1} />
</>
);
};
export default Page1;
"room={1}" 的值表示 json 的 id 是它將提取資訊的位置。我已經構建了它并且它可以作業。所以我只需要加載一個逐漸增長的數字。
我想要嘗試實作的是讓這個組件生成到我在 JSON 中擁有的 X 個條目。
我還需要動態生成這部分代碼
<Routes>
<Route path="/cyoa/page1" element={<Page1 />} />
<Route path="/cyoa/page2" element={<Page2 />} />
<Route path="/cyoa/page3" element={<Page3 />} />
<Route path="/cyoa/page4" element={<Page4 />} />
</Routes>
如果您能指出正確的方向，我將不勝感激。
你可以在這里找到整個代碼：https ://github.com/Littlemad/cyoa
uj5u.com熱心網友回復：
只需將數字作為道具傳遞：
function Page({number}) {
return (
<>Page {number} <Navigation room={number} /></>
);
}
// ...
<Routes>
<Route path="/cyoa/page1" element={<Page number={1} />} />
<Route path="/cyoa/page2" element={<Page number={2} />} />
<Route path="/cyoa/page3" element={<Page number={3} />} />
<Route path="/cyoa/page4" element={<Page number={4} />} />
</Routes>
如果您也需要Route動態生成 s ，那當然——就像您映射任何資料一樣。假設您有一組頁碼：
const pageNumbers = [1, 2, 3, 4];
// ...
<Routes>
{pageNumbers.map(number => <Route key={number} path={`/cyoa/page${number}`} element={<Page number={number} />} />)}
</Routes>
uj5u.com熱心網友回復：
你可以做這樣的事情：有一個頁面組件，就像你創建的第一個組件一樣，沒有數字，并為每個動態或需要更改的東西傳遞道具。
有一個頁面組件：
export default function PageComponent(props) {
return (<>
{ props.title }
<Navigation room={ props.room } />
</>);
}
您的 JSON 資料需要讓每個頁面的所有內容都不同。
示例 JSON 資料
const data = [{
title: 'Page 1',
room: 1,
path: '/cyoa/page1',
},
{
title: 'Page 2',
room: 2,
path: '/cyoa/page2'
}
];
然后對于您的路線，您可以動態生成路徑和渲染的組件，其道具會根據您的資料而變化。
您的路線
<Routes>
{data.map(x=>{
return <Route path={x.path} element={PageComponent(x)}/>
})}
</Routes>
希望這可以幫助。請注意，我實際上并沒有編譯并嘗試此代碼。我把它寫在我的頭上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/524604.html