React Controls und Plattformbibliotheken

Wenn Sie React- und Plattformbibliotheken verwenden, verwenden Sie dieselbe Infrastruktur wie die Power Apps-Plattform. Diese Infrastruktur bedeutet, dass Sie React- und Fluent-Bibliotheken nicht mehr einzeln für jedes Steuerelement verpacken müssen. Alle Steuerelemente verwenden eine gemeinsame Bibliotheksinstanz und -version, die eine nahtlose und konsistente Benutzeroberfläche bietet.

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 Themenausrichtung mit dem Power Apps Fluent-Designsystem

Mit diesen Vorteilen wird erwartet, dass dieser Ansatz die bevorzugte Methode wird, um alle Power Apps Codekomponenten zu erstellen, nachdem dieses Feature die allgemeine Verfügbarkeit erreicht hat.

Voraussetzungen

Wie bei jeder Komponente installieren Sie Visual Studio Code und die Microsoft Power Platform CLI, wie in den Voraussetzungen beschrieben.

Anmerkung

Wenn Sie Power Platform CLI bereits für Windows installiert haben, stellen Sie sicher, dass Sie die neueste Version verwenden, 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 dies nicht der Fall ist, lesen Sie dieses Lernprogramm: Erstellen Sie Ihre erste Komponente.

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, erstellt ein React-Komponentenprojekt und führt npm-install in dem Ordner aus, in dem Sie den Befehl ausführen:

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

Sie können das Steuerelement jetzt wie gewohnt in der Testumgebung durch Verwendung von npm start 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

Setzen Sie das Steuerelementelement-Attributcontrol-type auf virtual anstelle von 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.

Verwenden Sie Plattformbibliotheken für Fluent 8 und 9. Wenn Sie Fluent nicht verwenden, entfernen Sie das platform-library-Element, bei dem der Wert des Attributs nameFluent 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

Das Paket enthält keine React- und Fluent-Bibliotheken, da sie gemeinsam genutzt werden. Durch dieses Teilen wird die Größe von bundle.js verkleinert.

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 Beschreibung 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 stehen sowohl beim Build als auch zur Laufzeit den Controls zur Verfügung, die die Funktion für Plattformbibliotheken unterstützen. Derzeit stellt die Plattform die folgenden Versionen bereit, die die höchsten unterstützten Versionen sind.

Name npm-Paketname 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 8.121.1 8.121.1
Fluent @fluentui/react-components >=9,4,0 <=9,46,2 9.68.0

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. Sie können im Manifest entweder Fluent 8 oder Fluent 9 angeben, aber nicht beides.

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 mithilfe der neuen Vorlage erstellen und dann das Manifest und die index.ts-Methoden aktualisieren. Vergleichen Sie die im vorherigen Abschnitt beschriebenen Standard- und React-Beispiele.

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

A: Nein. React-Steuerelemente und Plattformbibliotheken funktionieren derzeit nur mit Canvas- und modellgesteuerten Apps. 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 Codekomponente
Weitere Informationen zum Power Apps component framework
Codekomponenten in Power Pages verwenden

  • Zuletzt aktualisiert um