2016-07-27 7 views
1

Wir verschieben derzeit eine Anwendung von asp.Net zu React/Redux und .Net-Kern. Die Anwendung ist sehr komplex, so dass wir versuchen, so dass jede Seite ein eigenes Modul ist. Aber auf bestimmte Komponenten (Modale, PDF-Viewer und andere spezialisierte Viewer) müssen wir in der gesamten Anwendung zugreifen. Gibt es eine Möglichkeit, diese Komponenten aus anderen React-Projekten in einer bestimmten Anwendung hinzuzufügen, ohne die gesamte Anwendung laden zu müssen. Oder vielleicht erstellen Sie eine Kern-React/Redux-Bibliothek, die in der gesamten Anwendung geht?Gemeinsame Komponenten über mehrere React/Redux-Anwendungen hinweg

Dank

Hinweis: wir sind zur Zeit Webpack, ES6, Reaktion und Redux

+0

Sind die Komponenten, die Sie über diese Anwendung freigeben möchten, von anderen React-Projekten verfügbar, die Sie erstellt haben? Wenn dies der Fall ist, sollten Sie in der Lage sein, diese spezifischen Komponenten zu dieser aktuellen Anwendung hinzuzufügen und sie normal zu importieren. Wenn es sich um Komponenten handelt, die Sie häufig wiederverwenden, ist es eine gute Idee, sie zu sammeln und eine benutzerdefinierte Bibliothek für Ihre Projekte zu erstellen. – adriennetacke

+0

wir tun dies jetzt, wir haben npm repo für die komponenten, es ist getrennt, und wird installiert, wenn wir es brauchen. – JordanHendrix

+0

@adriennetacke Wie würden Sie Objekte aus anderen Anwendungen importieren? – user3527318

Antwort

0

Als Geschwister zu Ihrem modules Verzeichnis, haben Sie ein shared Verzeichnis. Hier haben Sie normalerweise Verzeichnisse wie styles/, fonts/, images/ und ... components/. Die Komponenten hier können als atomare Strukturen betrachtet werden, die Ihre "molekularen" Module erzeugen. Zum Beispiel gehen alle benutzerdefinierten UI-Komponenten (z. B. Schaltflächen, Dropdown-Listen, Tooltips) hierhin - vorausgesetzt, Sie haben sich nicht für MaterialUI entschieden.

Dann importieren Sie diese Komponenten aus Ihren größeren "Feature" -Komponenten und verwenden sie.

Als weiteren Schritt können Sie alle Ihre freigegebenen Komponenten als ein privates npm-Modul erstellen und auf diese Weise bereitstellen.

Da Redux in der Diskussion ist, zielen Sie darauf, dass Ihre gerouteten Komponenten Containerkomponenten sind. Mit anderen Worten, in <Route path='/something' component={ThisComponent} />, ThisComponent sollte eine generierte Container-Komponente sein, über die connect()() Methode.

0

Ich würde von der Verwendung eines Routers abraten, da Ihre Anwendung leicht brechen könnte, wenn die .net-Anwendung URLs ändert.

würde Eine andere Möglichkeit so etwas wie React Habitat

0

Sie können auch Besuche Bit benutzen, die Sie isolieren bestimmte Komponenten aus verschiedenen Projekten helfen, sie in eine dynamische Bibliothek zu organisieren und sie in mehreren Anwendungen zu verwenden. Wir haben es für unsere eigenen React-Komponenten entwickelt und verwenden es nun seit über 10 Monaten für ähnliche Anwendungsfälle.

Verwandte Themen