Wie laden Sie mehrere React-Komponenten dynamisch?

Question

Hi Ich möchte mehrere react-Komponenten dynamisch aus einem Verzeichnis laden. So dass jemand nur eine Komponente in einem Verzeichnis hinzufügen muss, damit es geladen werden kann. Ich denke etwas entlang der Linien wie:

import * as dynamicComponents from './dynamicComponents'; 

const toAdd = [] dynamicComponents.forEach(function(component){ 
toAdd.push(Route path={component.link} component={component.implmentation} /> }) 


render(<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={Template}> 
     <IndexRoute component={Main} /> 
     {toAdd} 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root')); 

Ist das möglich?

Answer 1

Ich glaube, Ihre erste Import-Anweisung wird in Babel nicht funktionieren. Versuchen Sie dieses Paket:

npm i --save-dev babel-plugin-wildcard 

Fügen Sie es zu Ihrem .babelrc mit:

{ 
    "plugins": ["wildcard"] 
} 

Sie nicht Babel in Ihrer Umgebung verwenden können, aber im Wesentlichen müssen Sie die das Problem der Belastung von einer Wildcard lösen oder dynamischer Pfad. Das ist wahrscheinlich der schwierige Teil.

Sie müssen auch sicherstellen, dass jede Datei, die in das Verzeichnis abgelegt wird, eine React-Komponentenklasse als Standardexport exportiert und über eine statische Funktion eine Verknüpfung zurückgibt.

const SomeReactComponent =() => (<p>Rendering something.</p>); 

//Export link as static member of the class. 
SomeReactComponent.link = '/some/react/component/routing/link'; 

export default SomeReactComponent; 

Dann Code wie die folgenden wird zur Compile-Zeit arbeiten:

import * as dynamicComponents from './dynamicComponents'; 

const toAdd = dynamicComponents.map((ComponentClass) => <Route path={ComponentClass.link} component={ComponentClass} />); 

Dies ist eine Kompilierung-Lösung. Wenn Sie eine Laufzeitlösung wünschen, sollten Sie andere Importeure als den ES6-Import verwenden, von denen ich glaube, dass sie zur Laufzeit nicht dynamisch verwendet werden können.