从对象渲染React组件

时间:2018-06-20 14:04:55

标签: javascript reactjs react-component

假设我有以下将组件作为条目的对象:

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在不使用的情况下渲染这些组件。虽然我不确定该怎么做。

1 个答案:

答案 0 :(得分:2)

select * from (select "None|679501|3371371|0" as a) b where a='0'不是React组件,routes[k]是React组件。另外,由于您仅对值感兴趣,因此使用routes[k].component而不是Object.values

Object.keys

Working example