前端开发中，我们经常需要开发一些基于 React 的 Web 应用或部件，其中常常需要使用到一些复杂的组件和控件，这时候，我们可以选择使用一些现成的开源库和工具来帮助我们快速实现功能。
在 Microsoft 的 SharePoint Framework 中，有一个非常实用的 npm 包 @microsoft/sp-property-pane，该包提供了可轻松集成的可视化属性页，以便您的 Web 部件的用户可以轻松调整并与其交互。在本文中，我们将介绍如何使用该 npm 包，并提供详细的示例代码。
安装
要使用 @microsoft/sp-property-pane，您需要安装 SharePoint Framework（SPFx）并创建一个新的 Web 部件项目。接着，在项目的根目录下使用以下命令安装 @microsoft/sp-property-pane：
npm install @microsoft/sp-property-pane --save
使用
1. 引入
在 Web 部件的代码中，您需要引入以下内容：
import { IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneCheckbox, PropertyPaneDropdown, PropertyPaneToggle } from '@microsoft/sp-property-pane';
2. 创建属性页
在 Web 部件的代码中，您需要创建一个 IPropertyPaneConfiguration 对象，该对象包含一个或多个 IPropertyPaneField 对象，每个对象代表一个属性。
下面是一个示例：
-- -------------------- ---- ------- ------ ----- ----------------- ------- ---------------------------------------------- - -- --- --------- ------------------------------- -------------------------- - ------ - ------ - - ------- - ------------ --- --- ------ -- ------- - - ---------- ------ ------------ - ------------------------------------ - ------ ---- --- -------------------------------- - ----- ------- -------- ----- --- -------------------------------- - ------ ------- -------- - - ---- -------- ----- --- -- -- - ---- -------- ----- --- -- - - --- ---------------------------------- - ------ -------- ------- ---- -------- --- -- - - - - - -- - -展开代码
上面的代码创建了一个包含四个属性的属性页，分别是“描述”、“显示新闻”、“新闻列表”、“展示轮播图”。其中，描述和显示新闻是文本框和复选框，新闻列表是下拉框，展示轮播图是切换按钮。
使用 PropertyPaneTextField、PropertyPaneCheckbox、PropertyPaneDropdown 和 PropertyPaneToggle 等对象可以很方便地创建不同类型的属性。
3. 保存属性值
在 Web 部件的代码中，您需要在 Web 部件的属性被更改时保存这些设置。
下面是一个示例：
-- -------------------- ---- ------- ------ --------- ----------------------- - ------------ ------- --------- -------- --------- ------- ------------- -------- - ------ ------- ----- ----------------- ------- ---------------------------------------------- - -- --- --------- ---------------------------------------- ------- --------- ---- --------- ----- ---- - -- ------------- --- ----------- - ------------------------ - -------- - ----------------------------- - --------- - -- --- -展开代码
上面的代码中，在 onPropertyPaneFieldChanged 中，我们监听页面的变化，进而保存了属性值。
4. 使用属性值
在 Web 部件的代码中，您需要使用属性的值来控制 Web 部件的行为。
下面是一个示例：
-- -------------------- ---- ------- ------ ------- ----- ----------------- ------- ---------------------------------------------- - -- --- ------ --------- ---- - ----- -------- ------------------------------------ - -------------------- ----------- - ------------ ---------------------------- --------- ------------------------- --------- ------------------------- ------------- ---------------------------- - -- ------------------------ ----------------- - -展开代码
上面的代码中，我们使用 property 中保存的值让 Web 部件的行为发生变化。
总结
在本文中，我们介绍了如何使用 npm 包 @microsoft/sp-property-pane 来创建 Web 部件属性页。通过引入、创建属性页、保存属性值和使用属性值四个步骤，我们可以很方便地实现 Web 部件中的可视化属性调整。开发人员可以根据实际需求，在 Web 部件中使用该包，为用户提供更好的交互感受，从而提高应用程序的质量和易用性。
示例代码
您可以访问以下链接来获取完整的示例代码：
https://github.com/microsoft/sp-dev-fx-webparts/tree/master/samples/react-hello-world-property-pane
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac5eb5cbfe1ea06109ee
