javascript - 在 React Router 中按名称调用组件

Question

我正在使用最新版本的 React Router 4.1.2 和动态路由。

这对我有用:

routes.push(<Route key={tab.id} exact path="/" component={Dashboard}/>)

但这不起作用:

routes.push(<Route key={tab.id} exact path="/" component={tab.component}/>)

显然是因为{tab.component}是一个字符串(值为 Dashboard )，其中 {Dashboard}是一个函数。

我怎样才能让它发挥作用？如何将字符串转换为与字符串同名的 React 组件？

Answer 1

一种简单的方法是将组件放置在 map 中，以便您可以按名称查找它们。当您想通过字符串检索某些内容时，这是一种非常常见的模式。

const componentByName = {
  Dashboard: <Dashboard />
};

routes.push(<Route 
  key={tab.id} 
  exact path="/" 
  component={componentByName[tab.component]}/>
);