javascript - 如何向对象中定义的组件添加显示名称？

Question

我正在尝试将 React 组件渲染到 View 中。该 View 是一个仪表板。仪表板有侧边栏、标题和主要组件。侧边栏包含链接，单击这些链接会将匹配的组件呈现到主视图。主视图是重新呈现的 View 。

我正在使用 react-router 来渲染仪表板需要的各种链接，方法是遍历它们并确定单击了哪个导航链接。我正在使用 map 遍历路线。

路由对象的路由数组。

export const routes = [
    {
        path: "/",
        exact: true,
        main: () => <Home />
    },
    {
        path: "/company",
        exact: true,
        main: () => <Company />
    },
    {
        path: "/comments",
        exact: true,
        main: () => <Comments />
    }
]

显示路线:

{routes.map(route => (
    <Route
        key={route.path}
        path={route.path}
        exact={route.exact}
        component={route.main}
     />
))}

我希望路由能够根据需要渲染到主要组件，即当侧边栏上的导航链接被点击时。我遇到的错误是:Component definition is missing display name react/display-name on the line where I have the key main: main: () => <Company /> .

Answer 1

main 在这种情况下不应该是一个函数。尝试不使用函数或调用主函数。

{routes.map(route => (
    <Route
        key={route.path}
        path={route.path}
        exact={route.exact}
        component={route.main()}
     />
))}