如何渲染在 React 中作為 prop 傳遞的組件？

Question

我想通過使用循環而不是單獨編寫每個頁面來呈現我的頁面。 我制作了這個數組來存儲我的頁面的信息。

const pages = [
  { title: "Translate", url: "/translate", component: TranslatePage },
  { title: "Study", url: "/study", component: StudyPage },
  { title: "About", url: "/about", component: AboutPage },
  { title: "Home", url: "/", component: HomePage },
  { title: "Terms", url: "/study/terms", component: TermsPage },
];

對於每個頁面，我需要以這種格式呈現它：

        <Route
          path="/study"
          exact
          element={
            <StudyPage
              getDocuments={getDocuments}
              collectionRef={collectionRef}
              docs={docs}
            />
          }
        />

如何使用 currentPage.component 渲染每個頁面來編寫 Route 組件的元素部分？ 對於我的頁面數組中的每個組件，我需要得到

element={<ComponentReadFromPagesArray 
    getDocuments={getDocuments}
    collectionRef={collectionRef}
    docs={docs}
/>}

但我不知道如何從數組中拉出組件，然后將其作為帶有道具的自己的組件傳遞給元素

Answer 1

如果我正確理解你的問題，它會是這樣的：

const routes = pages.map(({component: Page, url: path}) => {
  const element = (<Page {...{collectionRef, docs, getDocuments}} />);
  return (<Route {...{element, exact: true, path}} />);
});