Freigeben über

React-Steuerungen und Plattformbibliotheken

  • Artikel

Wenn Sie React‑ und Plattformbibliotheken verwenden, verwenden Sie dieselbe Infrastruktur, die von der Power Apps-Plattform verwendet wird. Das bedeutet, dass Sie React‑ und Fluent-Bibliotheken nicht mehr einzeln für jede Steuerung packen müssen. Alle Steuerelemente teilen sich eine gemeinsame Bibliotheksinstanz und ‑version, um ein nahtloses und konsistentes Erlebnis zu bieten.

Durch die Wiederverwendung der bestehenden React‑ und Fluent-Bibliotheken der Plattform können Sie die folgenden Vorteile erwarten:

  • Reduzierte Kontrollbündelgröße
  • Optimierte Lösungsverpackung
  • Schnellere Laufzeitübertragung, Skripterstellung und Steuerungs-Rendering
  • Design- und Designausrichtung mit dem Power Apps Fluent-Designsystem

Angesichts der Vorteile, die durch die Wiederverwendung dieser Komponentenressourcen verfügbar sind, erwarten wir, dass dieser Ansatz der bevorzugte Weg für die Erstellung aller Power Apps-Codekomponenten sein wird, nachdem diese Funktion allgemein verfügbar ist.

Anmerkung

Mit der allgemeinen Verfügbarkeit werden alle vorhandenen virtuellen Steuerelemente weiterhin funktionieren. Sie sollten jedoch mit der neuesten CLI-Version (>=1.37) neu erstellt und bereitgestellt werden, um zukünftige Plattform-React-Versionsupgrades zu erleichtern.

Anforderungen

Wie bei jeder Komponente müssen Sie Visual Studio Code und die Microsoft Power Platform CLI installieren wie hier beschrieben: Voraussetzungen

Anmerkung

Wenn Sie die eigenständige Power Platform CLI für Windows bereits installiert haben, stellen Sie sicher, dass Sie die neueste Version ausführen, indem Sie den Befehl pac install latest verwenden. Die Power Platform Tools für Visual Studio Code sollten automatisch aktualisiert werden.

Erstellen einer React-Komponente

Anmerkung

Diese Anweisungen setzen voraus, dass Sie zuvor Codekomponenten erstellt haben. Wenn Sie dies nicht getan haben, sehen Sie sich dieses Tutorial an: Sie Ihre erste Komponente erstellen

Es gibt einen neuen Parameter --framework (-fw) für den Befehl pac pcf init. Setzen Sie den Wert dieses Parameters auf react.

Die folgende Tabelle zeigt die Langform der Befehle:

Parameter Wert
--name ReactSample
--namespace SampleNamespace
--template field
--framework react
--run-npm-install true (Standard)

Der folgende PowerShell-Befehl verwendet die Parameterverknüpfungen und erstellt ein React-Komponentenprojekt und npm-install wird ausgeführt in dem Ordner, in dem Sie den Befehl ausführen:

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

Sie können das Steuerelement nun wie gewohnt mit npm start in der Testumgebung erstellen und anzeigen.

Nachdem Sie das Steuerelement erstellt haben, können Sie es in Lösungen verpacken und für modellgesteuerte Apps (einschließlich benutzerdefinierter Seiten) und Canvas-Apps wie Standardcodekomponenten verwenden.

Unterschiede zu Standardkomponenten

Dieser Abschnitt beschreibt die Unterschiede zwischen einer React-Komponente und einer Standardkomponente.

ControlManifest.Input.xml

Das Steuerelement control-type-Attribut ist auf virtual gesetzt statt auf standard.

Anmerkung

Das Ändern dieses Werts konvertiert eine Komponente nicht von einem Typ in einen anderen.

Innerhalb des Ressourcenelements finden Sie zwei neue untergeordnete Plattform-Bibliothekselement-Elemente wie im folgenden Beispiel:

<resources>
  <code path="index.ts" order="1" />
  <platform-library name="React" version="16.14.0" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

Anmerkung

Weitere Informationen zu gültigen Plattformbibliotheksversionen finden Sie unter Liste der unterstützten Plattformbibliotheken.

Wir empfehlen die Verwendung von Plattformbibliotheken für Fluent 8 und 9. Wenn Sie Fluent nicht verwenden, sollten Sie das platform-library-Element entfernen, bei dem der name-Attributwert Fluent ist.

Index.ts

Die Methode ReactControl.init zur Steuerungsinitialisierung hat keine div-Parameter, da die React-Steuerelemente das DOM nicht direkt rendern. Stattdessen gibt ReactControl.updateView ein ReactElement zurück, das die Details des tatsächlichen Steuerelements im React-Format enthält.

bundle.js

React- und Fluent-Bibliotheken sind nicht im Paket enthalten, da sie gemeinsam genutzt werden, daher ist die Größe von bundle.js kleiner.

Beispielkontrollen

Die folgenden Steuerelemente sind in den Beispielen enthalten. Sie funktionieren genauso wie ihre Standardversionen, bieten aber eine bessere Leistung, da es sich um virtuelle Steuerungen handelt.

Sample Eigenschaft Verknüpfung
ChoicesPickerReact Der Standard ChoicesPickerControl ist in eine React-Steuerung umgewandelt. ChoicesPickerReact-Beispiel
FacepileReact Das ReactStandardControl, umgewandelt in ein React-Steuerelement. FacepileReact

Liste der unterstützten Plattformbibliotheken

Plattformbibliotheken werden sowohl beim Build als auch zur Laufzeit für die Steuerelemente verfügbar gemacht, die die Funktion der Plattformbibliotheken nutzen. Derzeit werden die folgenden Versionen von der Plattform bereitgestellt. Dabei handelt es sich um die höchsten derzeit unterstützten Versionen.

Name npm package name Erlaubter Versionsbereich Version geladen
React react 16.14.0 17.0.2 (Modell), 16.14.0 (Canvas)
Fluent @fluentui/react 8.29.0 8.29.0
Fluent @fluentui/react-components >=9.4.0 <=9.46.2 9.46.2

Anmerkung

Die Anwendung lädt zur Laufzeit möglicherweise eine höher kompatible Version einer Plattformbibliothek, aber dabei handelt es sich möglicherweise nicht um die neueste verfügbare Version. Fluent 8 und Fluent 9 werden jeweils unterstützt, können aber nicht beide im selben Manifest angegeben werden.

Häufig gestellte Fragen

F: Kann ich ein vorhandenes Standardsteuerelement mithilfe von Plattformbibliotheken in ein React-Steuerelement konvertieren?

A: Nein. Sie müssen ein neues Steuerelement mit der neuen Vorlage erstellen und dann die Methoden Manifest und Index.ts aktualisieren. Als Referenz vergleichen Sie die oben beschriebenen Standard- und Reaktionsproben.

F: Kann ich React-Steuerelemente und Plattformbibliotheken mit Power Pages verwenden?

A: Nein. React-Steuerelemente und Plattformbibliotheken werden derzeit nur für Canvas- und modellgesteuerte Apps unterstützt. In Power Pages werden React-Steuerelemente nicht basierend auf Änderungen in anderen Feldern aktualisiert.

Was sind Codekomponenten?
Codekomponenten für Canvas-Apps
Erstellen und Entwickeln einer Code-Komponente
Erlernen des Power Apps component framework
Codekomponenten in Power Pages verwenden