Eine Methode, ein Widget zu schreiben, das sowohl innerhalb von Experience Builder als auch in einer regulären React-App verwendet werden kann.<\/EM><\/P><\/P>Wenn Sie ein benutzerdefiniertes Widget für Experience Builder erstellen, ist es, wenn Ihr Hauptziel darin besteht, das Widget innerhalb von Experience Builder zu verwenden, am besten und schnellsten, es direkt mit den Standard-Workflows<\/A> zu erstellen.<\/P><\/P>Aber was, wenn Sie ein Widget erstellen müssen, das sowohl in einer einfachen React-App als auch<\/EM> innerhalb von Experience Builder funktioniert? Mit ein wenig zusätzlicher Arbeit über die Standard-Workflows hinaus können Sie eine React-Komponente (Widget) schreiben, die an beiden Stellen eingebunden werden kann!<\/P><\/P>Eine Methode dafür ist:<\/P>Verwenden Sie TSDX<\/A>, um eine React-Komponente zu erstellen und zu entwickeln.<\/LI>Installieren Sie die Komponente mit npm install<\/CODE> im client<\/CODE>-Ordner von Experience Builder.<\/LI>Erstellen Sie ein neues benutzerdefiniertes Experience Builder-Widget. Importieren und verwenden Sie innerhalb dieses Widgets die von Ihnen erstellte React-Komponente.<\/LI><\/OL><\/P>Theoretisch ziemlich einfach. In der Praxis kann es etwas komplex werden, daher werde ich die Details unten Schritt für Schritt durchgehen.<\/P><\/P>
<\/P>
Aber was, wenn Sie ein Widget erstellen müssen, das sowohl in einer einfachen React-App als auch<\/EM> innerhalb von Experience Builder funktioniert? Mit ein wenig zusätzlicher Arbeit über die Standard-Workflows hinaus können Sie eine React-Komponente (Widget) schreiben, die an beiden Stellen eingebunden werden kann!<\/P><\/P>Eine Methode dafür ist:<\/P>Verwenden Sie
npm install<\/CODE> im client<\/CODE>-Ordner von Experience Builder.<\/LI>Erstellen Sie ein neues benutzerdefiniertes Experience Builder-Widget. Importieren und verwenden Sie innerhalb dieses Widgets die von Ihnen erstellte React-Komponente.<\/LI><\/OL><\/P>Theoretisch ziemlich einfach. In der Praxis kann es etwas komplex werden, daher werde ich die Details unten Schritt für Schritt durchgehen.<\/P><\/P>
client<\/CODE>-Ordner von Experience Builder.<\/LI>Erstellen Sie ein neues benutzerdefiniertes Experience Builder-Widget. Importieren und verwenden Sie innerhalb dieses Widgets die von Ihnen erstellte React-Komponente.<\/LI><\/OL><\/P>Theoretisch ziemlich einfach. In der Praxis kann es etwas komplex werden, daher werde ich die Details unten Schritt für Schritt durchgehen.<\/P><\/P>
npx tsdx create
example<\/CODE>-Ordner, die Sie verwenden können, um Ihre Komponente im Kontext einer Beispielanwendung während der Entwicklung zu sehen. Während der Entwicklung führen Sie typischerweise npm start<\/CODE> sowohl im Stammverzeichnis (zum Bauen des Widgets) als auch im example<\/CODE>-Verzeichnis aus, um die App laufen zu lassen und die Ausgabe der Komponente zu sehen.<\/P><\/P>
npm start<\/CODE> sowohl im Stammverzeichnis (zum Bauen des Widgets) als auch im example<\/CODE>-Verzeichnis aus, um die App laufen zu lassen und die Ausgabe der Komponente zu sehen.<\/P><\/P>
example<\/CODE>-Verzeichnis aus, um die App laufen zu lassen und die Ausgabe der Komponente zu sehen.<\/P><\/P>
Thing<\/CODE>. Die erste Änderung, die ich vornehme, ist, die Komponente als Standardexport zu exportieren, damit der Import später etwas sauberer ist. Machen Sie also diese Änderungen<\/STRONG><\/A> an my-widget\\src\\index.tsx<\/CODE> und my-widget\\example\\index.tsx<\/CODE>. Nach dem Ausführen von npm start<\/CODE> sowohl im Stammverzeichnis als auch im example<\/CODE>-Verzeichnis und dem Aufruf von http:\/\/localhost:1234<\/A>, sollten Sie Ihre funktionierende Komponente sehen können (nur eine einzelne Textzeile):<\/P><\/P><\/P><\/P>
my-widget\\src\\index.tsx<\/CODE> und my-widget\\example\\index.tsx<\/CODE>. Nach dem Ausführen von npm start<\/CODE> sowohl im Stammverzeichnis als auch im example<\/CODE>-Verzeichnis und dem Aufruf von
my-widget\\example\\index.tsx<\/CODE>. Nach dem Ausführen von npm start<\/CODE> sowohl im Stammverzeichnis als auch im example<\/CODE>-Verzeichnis und dem Aufruf von
npm start<\/CODE> sowohl im Stammverzeichnis als auch im example<\/CODE>-Verzeichnis und dem Aufruf von
example<\/CODE>-Verzeichnis und dem Aufruf von
npm install<\/CODE> in Experience Builder<\/H2>Jetzt haben Sie eine React-Komponente, die in einer React-App läuft (das ist das, was oben unter http:\/localhost:1234<\/A><\/CODE> läuft), also machen wir weiter und zeigen unsere Komponente innerhalb von Experience Builder.<\/P><\/P>Zuerst installieren Sie Experience Builder gemäß den Anweisungen hier<\/A>.<\/P><\/P>Öffnen Sie dann ein Terminal und navigieren Sie zum client<\/CODE>-Verzeichnis in den entpackten Dateien von Experience Builder. Führen Sie npm install <PATH><\/>code aus, wobei <PATH><\/>code der lokale Pfad zu Ihrer React-Komponente ist. Wenn Sie beispielsweise den Befehl npm tsdx create ...<\/>code unter C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
http:\/localhost:1234<\/A><\/CODE> läuft), also machen wir weiter und zeigen unsere Komponente innerhalb von Experience Builder.<\/P><\/P>Zuerst installieren Sie Experience Builder gemäß den Anweisungen hier<\/A>.<\/P><\/P>Öffnen Sie dann ein Terminal und navigieren Sie zum client<\/CODE>-Verzeichnis in den entpackten Dateien von Experience Builder. Führen Sie npm install <PATH><\/>code aus, wobei <PATH><\/>code der lokale Pfad zu Ihrer React-Komponente ist. Wenn Sie beispielsweise den Befehl npm tsdx create ...<\/>code unter C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
Zuerst installieren Sie Experience Builder gemäß den
Öffnen Sie dann ein Terminal und navigieren Sie zum client<\/CODE>-Verzeichnis in den entpackten Dateien von Experience Builder. Führen Sie npm install <PATH><\/>code aus, wobei <PATH><\/>code der lokale Pfad zu Ihrer React-Komponente ist. Wenn Sie beispielsweise den Befehl npm tsdx create ...<\/>code unter C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
client<\/CODE>-Verzeichnis in den entpackten Dateien von Experience Builder. Führen Sie npm install <PATH><\/>code aus, wobei <PATH><\/>code der lokale Pfad zu Ihrer React-Komponente ist. Wenn Sie beispielsweise den Befehl npm tsdx create ...<\/>code unter C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
npm install <PATH><\/>code aus, wobei <PATH><\/>code der lokale Pfad zu Ihrer React-Komponente ist. Wenn Sie beispielsweise den Befehl npm tsdx create ...<\/>code unter C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
<PATH><\/>code der lokale Pfad zu Ihrer React-Komponente ist. Wenn Sie beispielsweise den Befehl npm tsdx create ...<\/>code unter C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
npm tsdx create ...<\/>code unter C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
C:\\code\\my-widget<\/>code ausführen, führen Sie npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
npm install C:\\code\\my-widget<\/>code aus.<\/>code.<\/>code.<\/>code.<\/>code.(Tipp: Fügen Sie in dem Befehl npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
npm install...<\/>code den Parameter --no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
--no-audit<\/>code hinzu, um das Audit aller Dateien von Experience Builder zu überspringen)<\/>code.<\/>code.<\/>code.
aus dem Ordner client/sample-widgets/simple in client/your-extensions/widgets kopieren um anzufangen.Innerhalb von client extbackslash your-extensions extbackslash widgets extbackslash simple extbackslash src extbackslash runtime extbackslash widget.tsx importieren sie ihre Komponente durch Einfügen einer Importanweisung nahe am Anfang der Datei:import MyWidget from 'my-widget';<<EMOJI_0 > ><<EMOJI_1 > >Sie können diese Komponente dann im JSX nahe am Ende der Datei verwenden. Ersetzen sie die Funktion render() durch diese:render() { return ( <div className=
import MyWidget from 'my-widget';<<EMOJI_0 > ><<EMOJI_1 > >
render() { return ( <div className=
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
