Kann ich Schleifen verwenden, um ES6-Importanweisungen zu minimieren?

Question

überprüfte ich die doc für „Import“ und das Gefühl, es ist unmöglich, die importierten Namen wie Array-Elemente zu behandeln. Jeder Vorschlag, sich mit einer solchen Situation zu befassen, ist willkommen.

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

Sie können dies mit ES6 Importe nicht tun, weil sie static sind. Diese

bedeutet, dass müssen Sie angeben, was Sie bei der Kompilierung importieren und exportieren und kann nicht auf Änderungen zur Laufzeit reagieren.

Mit so etwas wie ein Array bedeuten würde, dass der Code ausgeführt werden muss, bevor das System sicher wissen kann, was importiert bekommen wird.

Der einzige Weg zur Zeit * (siehe unten), dies zu umgehen ist den require CommonJS Ansatz zu verwenden.

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

können Sie auch die beiden map Schlaufen miteinander kombinieren:

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

Das, das nicht eher gesagt, Sie nicht mehr als 10 verschiedenen Probenkomponenten wahrscheinlich brauchen. Anstatt einzelne Komponenten für geringfügige Unterschiede zu erstellen, warum nicht eine einzelne Komponente verwenden und ihr einen Typ übergeben, der ihr Verhalten bestimmt?

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 der Tat könnte man nicht mehrere Routen benötigt, wie gut und könnte eine Einzel Route mit einem dynamischen Segment, die den Probentyp verwenden und übergibt das zusammen mit dem Bauteil. Wenn Ihre Komponente Standard exportiert

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

erstellen index.js für den Export alle Dateien eines Ordners

Form:

import Sample from './sample' 

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

---

Derzeit gibt es eine proposal dynamischen Import hinzuzufügen Module es6 dann erster Import in Ihrer Indexdatei und dann exportieren

importiere c1 aus '../samples/sample1'; Export von c1‘../samples/sample1' ;

wenn Ihre Komponente nicht als Standard exportiert wurden, können Sie den Export

Export * von‘../samples/sample1' leiten;

und Import, wo Sie

Import {c1, c2} von‘../samples' verwendet werden soll;

Es wird die Import-Anweisungen