[英]Passing props to a component using a variable (not a static component) in React router 5
我知道在 react-router 5 中,您可以像這樣將一些道具傳遞給子組件:
<Route path="/"
exact
render={ props => <MyPage title={myTitle} dataPath={myDataPath}
{...props} />} />
但就我而言,我使用的是路由模型:
import { ComponentType, FC } from "react";
interface RouteItem {
key: string;
title: string;
tooltip?: string;
path?: string;
component?: FC<{}>;
contentPath?: string;
enabled: boolean;
icon?: ComponentType;
subRoutes?: Array<RouteItem>;
appendDivider?: boolean;
}
export default RouteItem;
然后我在配置文件( config/index.ts
)中定義這些,如下所示:
// components
import DetailPageTemplate from "../pages/DetailPageTemplate";
// interface
import RouteItem from '../model/RouteItem.model';
// define app routes
export const routes: Array<RouteItem> = [
{
key: "router-detail-one",
title: "Detail One",
path: "/detail-one",
enabled: true,
contentPath: '../data/DetailOneCopy.json',
component: DetailPageTemplate,
appendDivider: true,
},
{
key: "router-detail-two",
title: "Detail Two",
path: "/detail-two",
enabled: true,
contentPath: '../data/DetailTwoCopy.json',
component: DetailPageTemplate,
appendDivider: true,
},
];
這感覺是一個非常愚蠢的問題(我不熟悉語法)但我希望能夠在我的 App.tsx 中循環傳遞其中一些參數,而且我不知道如何將 props 傳遞給組件變量(因為它不是 JSX):
import React from 'react';
// components
import Layout from './components/global/Layout';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
// app routes
import { routes } from './config';
// interfaces
import RouteItem from './model/RouteItem.model';
// define app context
const AppContext = React.createContext(null);
// default component
const DefaultComponent = () => <div>No Component Defined.</div>;
function App() {
// const [useDefaultTheme, toggle] = useReduc
return (
<>
<AppContext.Provider value={null}>
<Router>
<Switch>
<Layout>
{routes.map((route: RouteItem) =>
(
<Route
key={`${route.key}`}
path={`${route.path}`}
component={route.component || DefaultComponent}
{ /* ^ How can I pass props to the component? */ }
exact
/>
)
)}
</Layout>
</Switch>
</Router>
</ThemeProvider>
</AppContext.Provider>
</>
);
}
export default App;
我認為您可以將route.component
用作 JSX <route.component />
但為了命名一致性(大寫),您可以先將其分配給 const
{routes.map((route: RouteItem) => {
const Component = route.component;
return (
<Route
key={`${route.key}`}
path={`${route.path}`}
component={
(Component &&
((props: any) => <Component {...props} />)) ||
DefaultComponent
}
exact
/>
);
})}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.