React、TypeScript Hero 和 TSLint 问题

Question

我在 React 和 TypeScript 中创建了一个项目，我正在使用 React Router dom 在页面中我想从后端动态加载组件名称

<Router>
 <Switch>
  {routeData.map((route:any, key:number) => {
    return <Route key={key} path={route.PageURL} component={route.Component}</Route>
  })}
 </Switch>
</Router>

现在我需要导入像

这样的组件

import ListData from './ListData'

但是当我保存时它会消失，因为这些组件未被使用，我如何让 tslint 和打字稿英雄扩展忽略这些组件 我只想忽略 1 个文件

Answer 1

作为组件传递字符串是行不通的。

如果您真的想要这样的动态路由，您可以创建一个允许以这种方式路由的组件映射。

import ListData from './ListData'

const routableComponents = {
  ListData,
  // other components that can be routed this way.
}

现在您的路由可以从您导入的组件中查找它需要的实际组件：

<Route
  key={key}
  path={route.PageURL}
  component={routableComponents[route.Component]}
/>

或者，无论您在哪里定义 routeData，您都可以将其更改为：

// routeData.ts
import ListData from './ListData'

export default [
  { PageURL: 'url/to/list-data', Component: ListData },
]

现在这将起作用：

component={route.Component}

因为route.Component指向一个真实的组件。

最后，放弃那个:any！只要 routeData 来自 typescript 文件，您就不会希望像那样丢失类型信息。

Answer 2

可能我处理这个问题的方法是在您的组件目录中创建一个 index.ts 或 components.ts 文件，如下所示：

import { ListData } from './ListData';
import { Component2 } from './Component2';

const components: React.Component<RouteComponentProps>[] = {
  ListData,
  Component2
};

export default components;

然后您可以在您的应用中导入这些组件：

import components from './components';

这将为您提供一个对象，其键为组件名称，并为组件赋值。然后你可以这样访问一个组件：components['ListData']

注意：这是未经测试的，我的类型可能有误，希望这足以让您走上正确的道路。

React、TypeScript Hero 和 TSLint 问题

React, TypeScript Hero and TSLint question

typescript

reactjs

tslint