使用 Power Apps 组件中的 React 简介

10 分钟

您在构建更复杂的代码组件时，可以将 Power Apps Component Framework 提供的内置功能纳入您的逻辑。使用这些功能，您可以了解托管您的组件的客户端、运行您的组件的设备，以及其他实用程序类型的服务（例如格式化）。如果组件要与 Dataverse 表数据交互，您可以使用 WebAPI 功能与数据进行交互。

对于简单组件，手动编写 HTML 很正常，但随着您的需求变得更加复杂，使用 UI 框架库效果会更好。有多种 JavaScript UI 框架可供选择，但 React 是更经常与 Power Apps 代码组件配合使用的库之一。

在本模块的其余部分中，我们将更详细地探讨这些主题。我们将使用几个动手实践示例，您可以按照这些示例，使用此框架的一些更高级的功能来构建您的组件。

使用组件上下文

此上下文对象包含由定制器设置的值，可映射到清单和实用程序函数中定义的属性名称。在您构建的组件中，您可以在组件逻辑中使用上下文对象，访问稍后将在本模块中使用的大多数内置功能。

组件的 init 和 updateView 方法可使用上下文参数。通常，您会在 init 方法中填充类级别变量，支持在组件的其他方法中轻松访问上下文。以下是在 init 方法中保存上下文以供之后使用的示例：

export class ChoicesPicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    
    private _context: ComponentFramework.Context<IInputs>;

    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement,
    ): void {
     
        this._context = context;

        /* other logic goes here */
    }
}

上下文对象组件可以提供有关组件运行环境的大量信息。以下是主要的可用属性概览：

client - 此属性为您提供有关客户端（Web、Outlook 或移动）、外形规格（台式机、平板电脑或手机）、是否离线以及网络是否可用的信息。
mode - 此属性提供有关代码组件当前状态的信息。例如，组件是否可见、是否被禁用以及当前分配的规模。
userSettings - 此属性提供有关当前用户的信息，例如他们的 LanguageId、用户 ID 和名称。对于模型驱动应用，securityRoles 属性对于了解当前用户的角色非常有用。

上下文对象还可访问一些实用的内置服务。以下是最常用的内置服务：

device - 此属性可访问使用本机设备功能的方法。使用这些服务，您可以捕获音频、视频和图像，获取条形码值，识别设备的地理位置并选择文件。
factory - 目前仅提供与 Popup 服务配合使用的方法，但将来会支持其他服务。
formatting - 提供方法，帮助您格式化数据（从货币到时间）。这些方法可以帮助您与托管应用程序用户设置保持格式一致。
navigation - 提供与导航相关的方法，例如打开窗体、打开 URL、对话框（预警、确认、错误）等。
resources - 访问方法，以获取清单中定义的资源文件的所有相关信息。这些方法至关重要，有助于对组件的所有内容进行本地化。
utils - 访问表元数据，还允许您检查用户对特定表的访问权限。 lookupObjects 方法支持组件访问标准查找对话框，允许用户选择一行或多行。
webAPI - 提供对 Dataverse 表数据的基本创建、读取、更新和删除操作的访问权限。

以下是使用设备 pickFile 功能的示例：

 private onUploadButtonClick(event: Event): void {
    this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
  }

值得注意的是，其中一些服务需要在清单的功能使用部分中启用，之后它们才能工作。有些服务可能仅在特定类型的托管应用中可用。例如，webAPI 仅在模型驱动应用和 Power Pages 中可用，不适用于画布应用。有关详细信息，请查看各服务的引用页面。

使用 React

有很多可供选择的 UI 框架；然而，使用 React 有一些好处。 React 受到青睐，是因为底层 Power Apps 平台内部也使用 React。 Power Apps Component Framework 还提供使用相同基础结构的内置支持。此功能意味着，您无需手动将 React 和 Fluent UI 库打包到每个控件中。所有控件将共享通用的公共库实例和版本，可提供无缝且一致的体验。

以下命令展示了如何初始化组件，并使用 React 框架：

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

您可能注意到了，唯一的区别是 -fw（或 --framework）选项，用于启用 React。此选项将导致为您生成的初始文件包含必要的 React 配置。

稍后，在本模块中，您将使用此 React 功能构建一个代码组件。

继续

使用 Power Apps 组件中的 React 简介

使用组件上下文

使用 React

反馈