ループを使用してES6のインポート文を最小限に抑えることはできますか？

Question

"インポート"のためにドキュメントをチェックし、インポートされた名前を配列要素のように扱うことは不可能だと感じました。このような状況に対処するための提案は大歓迎です。

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

Answer 1

彼らはstaticあるので、あなたはES6の輸入を使用してこれを行うことはできません。

これは、コンパイル時にインポートおよびエクスポートするものを指定する必要があり、実行時に変更に反応できないことを意味します。

配列のようなものを使用すると、コードが実行されてシステムがインポートする内容を自信を持って認識できるようになります。

これを回避するための現在の唯一の方法は、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} 
    /> 
)) 

また、1つに2つの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} />} /> 

---

ES6モジュールに動的なインポートを追加するproposalは現在あり：

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}を使用したい

とインポート。

それはimport文