[英]Rendering React Components from an Object
假設我有以下將組件作為條目的對象:
import Comp1 from './Comp1'
import Comp2 from './Comp2'
import Comp3 from './Comp3'
const components = { 'comp1' : Comp1, 'comp2' : Comp2, 'comp3' : Comp3 }
我想使用此對象來呈現這些組件:
Object.keys(components).map((key, i) => (
<div key={i}>
<components[key] /> // this does not work
</div>
))}
實際上,我正在嘗試使用配置對象渲染路線:
export const routes = {
'home' : {
path: '/',
component: Home,
exact: true,
access: {
anonymous: true
},
navigation: {
label: 'Home',
icon: 'fa-home',
show: true
}
},
....
const Routes = () => (
<div>
{Object.keys(routes).map((k, i) => (
<Route
key={i}
exact={routes[k].exact}
path={routes[k].path}
render={() =>
!routes[k].access.anonymous ? (
<Redirect to="/login"/>
) : (
<routes[k] /> // nope
)
}
/>
))}
</div>
)
我當時以為<components[key] />
是JSX,而React不需要使用JSX,所以解決方案可能是使用標准JS在不使用JSX的情況下呈現這些組件。 雖然我不確定該怎么做。
routes[k]
不是React組件, routes[k].component
是。 另外,由於您僅對值感興趣,因此請使用Object.values
而不是Object.keys
。
Object.values(routes).map((route, i) => (
<Route key={i}
exact={route.exact}
path={route.path}
render={() =>
!route.access.anonymous ? (
<Redirect to="/login"/>
) : (
<route.component />
)
}
/>
))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.