我可以使用循环来最小化ES6导入语句吗? [英] Can I use loops to minimize ES6 import statements?

问题描述

我检查了文档中的"import"，并觉得不可能将导入的名称视为数组元素.欢迎提出任何解决这种情况的建议.

I checked the doc for "import" and feel it's impossible to treat the imported names like array elements. Any suggestion to deal with such a situation is welcome.

import C1 from '../samples/sample1'
import C3 from '../samples/sample3'
import C4 from '../samples/sample4'
import C5 from '../samples/sample5'
import C6 from '../samples/sample6'
import C7 from '../samples/sample7'
import C8 from '../samples/sample8'
import C9 from '../samples/sample9'
......
......
<Route path='/sample1' component={C1} />
<Route path='/sample3' component={C3} />
<Route path='/sample4' component={C4} />
<Route path='/sample5' component={C5} />
<Route path='/sample6' component={C6} />
<Route path='/sample7' component={C7} />
<Route path='/sample8' component={C8} />
<Route path='/sample9' component={C9} />

推荐答案

您无法使用ES6导入来执行此操作，因为它们是

You cannot do this using ES6 imports because they are static.

这意味着您必须指定在编译时导入和导出的内容，并且在运行时不能对更改做出反应.

This means that you must specify what you import and export at compile time and can’t react to changes at runtime.

使用类似数组的东西意味着必须在系统自信地知道要导入的内容之前运行代码.

Using something like an array would mean that the code must run before the system can confidently know what's getting imported.

当前解决此问题的唯一方法(请参见下面的方法)是使用

The only way currently* (see bellow) to get around this is to use the require CommonJS approach.

const routes = Array
  .from({ length: 10 }) // create array of 10 elements
  .map((_, i) => require(`../samples/sample${i + 1}`)) // map each element to an imported file using the index
  .map((c, i) => ( // map each component to a route
    <Route
      path={`/sample${i + 1}`}
      component={c}
    />
  )) 

您还可以将两个 map 循环组合为一个循环:

You can also combine the two map loops into one:

const routes = Array
  .from({ length: 10 })
  .map((c, i) => (
    <Route
      path={`/sample${i + 1}`}
      component={require(`../samples/sample${i + 1}`)}
    />
  ))

话虽这么说，但很有可能不是，您可能不需要10个不同的样本组件.为什么不使用单个组件并为它传递一种确定其行为的类型，而不是为单个组件创建一些细微差别?

That being said, more likely that not, you probably don't need 10 different sample components. Instead of creating individual components for minor differences, why not use a single component and pass it a type that determines it's behavior?

import Sample from './sample'

const routes = Array
  .from({ length: 10 }) // create array of 10 elements
  .map((c, i) => 
     <Route // map each component to a route 
       path={`/sample${i + 1}`}
       component={props => <Sample type={i + 1} {...props} />}
       {/*                         ^ now every sample knows which one it is */}
     />
   )

实际上，您可能也不需要多条路线，而可以使用一条带有代表样品类型的动态细分的单路线，并将其传递给组件.

In fact, you might not need multiple routes as well and could use a single-route with a dynamic segment representing the sample type and passes that along to the component.

import Sample from './sample'

<Route path="/sample/:type" component={({ params }) => <Sample type={params.type} />} />

---

当前有提案，用于向ES6模块添加动态导入:

---

There is currently a proposal to add dynamic importing to ES6 modules:

Promise.all(
  Array
    .from({ length: 10 }) // create array of 10 elements
    .map((_, i) => import(`../samples/sample${i + 1}`)) // map each element to a promise resolving to the imported file
).then(components => {  // map each component to a route
  const routes = components
    .map((c, i) => (
      <Route
        path={`/sample${i + 1}`}
        component={c}
      />
    ))
})

这篇关于我可以使用循环来最小化ES6导入语句吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！