freeCodeCamp.org
·
如何在 Power Apps PCF 组件中使用 React 19
💡
原文英文，约1100词，阅读约需4分钟。
📝
内容提要
Power Apps 组件框架（PCF）支持使用 HTML、CSS 和 JavaScript 创建自定义组件。本文介绍如何将 React 最新版本（v19）集成到 PCF 组件中，包括项目创建、依赖安装和按钮功能实现。手动安装 React 可避免 Microsoft 内置控件的版本限制，提升开发灵活性。
🎯
关键要点
- Power Apps 组件框架（PCF）允许使用 HTML、CSS 和 JavaScript 创建自定义组件。
- 创建 PCF 项目时，可以选择标准控件或 React 虚拟控件，React 适合复杂组件。
- 使用 React 16/17 限制了 PCF 组件的功能，但可以手动集成更新版本。
- 本文介绍如何将 React 最新版本（v19）集成到 PCF 组件中，包括项目创建和依赖安装。
- 创建 PCF 项目需要使用 PAC CLI，并在项目中手动安装 React 依赖。
- 安装 React 19 需要四个依赖项：react、react-dom、@types/react 和 @types/react-dom。
- 创建非 React 按钮以验证环境设置，然后再创建 React 按钮。
- 使用 updateView() 方法处理动态输入值的重新渲染。
- 手动安装和配置 React 可以避免 Microsoft 内置控件的版本限制，提升开发灵活性。
- 虽然不支持虚拟化，但对于许多组件来说，这是现代工具和可维护性的合理权衡。
❓
延伸问答
如何在 Power Apps 中创建 PCF 项目？
使用 PAC CLI 创建 PCF 项目，运行命令 'pac pcf init -ns SampleNameSpace -n SampleComponent --template field'，然后安装默认依赖。
为什么要手动安装 React 19 而不是使用内置控件？
手动安装 React 19 可以避免 Microsoft 内置控件的版本限制，提升开发灵活性。
在 PCF 组件中如何处理动态输入值的重新渲染？
使用 updateView() 方法处理动态输入值的重新渲染，当 PCF 属性包变化时触发该方法。
安装 React 19 需要哪些依赖项？
安装 React 19 需要四个依赖项：react、react-dom、@types/react 和 @types/react-dom。
如何在 PCF 组件中创建一个 React 按钮？
创建一个新的 Button.tsx 文件，定义一个接受 label 和 onClick 属性的 React 组件，并在 index.ts 中渲染该组件。
使用 React 19 开发 PCF 组件有哪些限制？
虽然手动安装 React 19 提供了灵活性，但不支持虚拟化，这是一个合理的权衡。
➡️
