Question

我检查了文档＆＃34; import＆＃34;并且觉得不可能像导入数组元素那样处理导入的名称。任何处理这种情况的建议都是受欢迎的。

＆＃13;

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} />

＆＃13;

Answer 1

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

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

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

目前*（见下文）解决这个问题的唯一方法是使用require CommonJS方法。

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循环合并为一个：

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

话虽如此，更可能不是，您可能不需要10个不同的样本组件。为什么不使用单个组件并将其传递给确定其行为的类型，而不是为微小差异创建单个组件？

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 */}
     />
   )

实际上，您可能也不需要多个路径，并且可以使用具有表示样本类型的动态段的单一路径，并将其传递给组件。

import Sample from './sample'

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

目前有proposal添加动态导入到ES6模块：

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}
      />
    ))
})

Answer 2

创建index.js，用于从一个文件夹导出所有文件

如果您的组件默认导出，则首先导入索引文件，然后导出

从'../samples/sample1'导入c1; 从'../ samples / sample1'中导出c1;

如果您的组件未导出为默认值，则可以直接导出

从'../ samples / sample1'中导出*;

并导入您要使用的位置

从'../ samples'中导入{c1，c2};

它将缩短导入语句

我可以使用循环来最小化ES6导入语句吗？

2 个答案: