使用 React 库和平台库时，使用与 Power Apps 平台相同的基础结构。 此基础结构意味着不再需要为每个控件单独打包 React 和 Fluent 库。 所有控件共享一个通用库实例和版本，共同提供无缝且一致的体验。
通过重用现有平台 React 和 Fluent 库，可以期待以下优势：
- 减少控制包大小
- 解决方案打包优化
- 更快的运行时传输、脚本编写和控件渲染
- 与 Power Apps Fluent 设计系统的设计和主题对齐
借助这些优势，此方法有望成为在此功能正式发布后创建所有Power Apps代码组件的首选方法。
先决条件
与任何组件一样，按照先决条件中所述安装Visual Studio Code和Microsoft Power Platform CLI。
Note
如果已安装用于 Windows 的 Power Platform CLI，请使用pac install latest命令确保当前运行的是最新版本。
适用于Visual Studio Code的 Power Platform 工具应自动更新。
创建 React 组件
Note
这些说明假定你之前已经创建过代码组件。 如果没有，请参阅本教程： 创建第一个组件。
-fw 命令有一个新的 （--framework）参数。 将此参数的值设置为 react。
下表显示了命令的长形式：
| Parameter | Value |
|---|---|
--name |
ReactSample |
--namespace |
SampleNamespace |
--template |
field |
--framework |
react |
--run-npm-install |
true（默认值） |
以下 PowerShell 命令使用参数快捷方式，并在运行该命令的文件夹中创建一个 React 组件项目并运行 npm-install：
pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm
现在可以像往常一样使用 npm start 在测试工具中生成和查看控件。
构建该控件后，可以在解决方案中打包它，并将其用于模型驱动应用（包括自定义页面）和画布应用，就像标准代码组件一样。
与标准组件的差异
本部分介绍 React 组件与标准组件之间的差异。
ControlManifest.Input.xml
将 控件元素control-type 属性设置为 virtual 而不是 standard。
Note
更改此值不会将组件从一种类型转换为另一种类型。
在 resources 元素中，找到两个新的 platform-library 元素 子元素，如以下示例所示：
<resources>
<code path="index.ts" order="1" />
<platform-library name="React" version="16.14.0" />
<platform-library name="Fluent" version="9.46.2" />
</resources>
Note
有关有效平台库版本的详细信息，请参阅 支持的平台库列表。
使用 Fluent 8 和 9 的平台库。 如果不使用 Fluent，请删除Fluent属性值为name的platform-library元素。
Index.ts
用于控件初始化的 ReactControl.init 方法没有 div 参数，因为 React 控件不会直接呈现 DOM。 相反， ReactControl.updateView 返回一个 ReactElement，其中包含 React 格式的实际控件的详细信息。
bundle.js
该包不包含 React 和 Fluent 库，因为它们是共享的。 此共享使 bundle.js 大小更小。
示例控件
这些控件包含在示例中。 它们的功能与标准版本相同，但由于它们是虚拟控件，因此可提供更好的性能。
| 示例 | Description | 链接 |
|---|---|---|
| ChoicesPickerReact | 转换为 React 控件的标准 ChoicesPickerControl 。 | ChoicesPickerReact 示例 |
| FacepileReact | ReactStandardControl 转换为 React 控件。 | FacepileReact |
支持的平台库列表
平台库在生成和运行时中都可用于使用平台库功能的控件。 目前，该平台提供以下版本，这些版本是受支持的最高版本。
| Name | npm 包名称 | 允许的版本范围 | 版本已加载 |
|---|---|---|---|
| React | 反应 | 16.14.0 | 17.0.2 （模型）， 16.14.0 （画布） |
| 流利 | @fluentui/react | 8.29.0 | 8.29.0 |
| 流利 | @fluentui/react | 8.121.1 | 8.121.1 |
| 流利 | @fluentui/react-components | >=9.4.0 <=9.46.2 | 9.68.0 |
Note
应用程序可能会在运行时加载更高兼容版本的平台库，但该版本可能不是可用的最新版本。 可以在清单中指定 Fluent 8 或 Fluent 9，但不能同时指定这两者。
FAQ
问：是否可以使用平台库将现有标准控件转换为 React 控件？
答：否。 必须使用新模板创建新控件，然后更新 manifest 和 index.ts 中的方法。 供参考，请比较上一节中所述的标准和 React 示例。
问：是否可以将 React 控件和平台库与Power Pages配合使用？
答：否。 React 控件和平台库目前仅适用于画布和模型驱动应用。 在Power Pages中，React 控件不会根据其他字段中的更改进行更新。
相关文章
什么是代码组件？
画布应用的代码组件
创建和生成代码组件
了解 Power Apps 组件框架
在 Power Pages 中使用代码组件