反應，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'

但是當我保存這些組件未使用時，它會 go 消失，我怎樣才能讓這些組件被tslint 和 typescript 英雄擴展忽略我只想忽略 1 個文件

Answer 1

將字符串作為組件傳遞是行不通的。

如果你真的想要這樣的動態路由，你可以創建一個允許以這種方式路由的組件的 map。

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';

這將為您提供一個 object，其鍵為組件名稱，並為組件賦值。 然后，您可以這樣訪問組件： components['ListData']

注意：這是未經測試的，我的類型可能是錯誤的，我希望這足以讓你走上正確的道路。