在前端开发中，我们需要使用许多库和工具来简化我们的开发流程，提高我们的效率。其中，npm 包是非常常用的一种工具，它为我们提供了许多前端代码的依赖包和工具包，方便我们快速开发各种应用程序。
本文将介绍一个非常实用的 npm 包，即 spfx-office-ui-fabric-people-picker。这个包能够方便地实现 Office UI Fabric 风格的人员选择器，是非常好用的一个工具，对于需要实现人员选择器的开发者来说，一定会非常有帮助。
简介
spfx-office-ui-fabric-people-picker 是一个基于 React 的 npm 包，它是在 Office UI Fabric 的基础上开发的一个人员选择器组件。通过使用 spfx-office-ui-fabric-people-picker，我们可以非常容易地实现一个漂亮、易用的人员选择器，而且它还支持多种不同类型的人员选择器，例如单选、多选、包含组织结构等。
此外，spfx-office-ui-fabric-people-picker 还具有一个重要的特性，即它可以集成到 SharePoint Framework (SPFx) 的应用程序中。这一特性使得 spfx-office-ui-fabric-people-picker 成为了一个非常实用的工具，可以帮助我们更加轻松地开发 SharePoint Framework 应用程序。
安装
安装 spfx-office-ui-fabric-people-picker 很简单，只需要在命令行中执行以下命令即可：
npm install spfx-office-ui-fabric-people-picker --save
使用
在使用 spfx-office-ui-fabric-people-picker 之前，我们需要先导入它，然后可以使用它的组件来创建一个人员选择器。以下是一个基本的示例代码：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ -
----------------------------
--------------
-------------------
- ---- --------------------------------------
------ - ---------- - ---- -------------------------
----- ------------ --------------- - --------------------------------- -------------- -- ---------
----- ---------------- --------------------------- - -
---------------------- ---------- --------
------------------- --- ------- -------
---------------------- ---
------------------------- ---
--------------------------- ---------- ----------
-------------------------------------- --- ------- -------
-------------- ---------------
------------ -------------
--
------ ----- ------------- --------------------------- - -- -- -
----- -------- ---------- - ------------------------------------
------ -
-------------------
----------------------------------
----------------------------------
----------------------------------------
-----------------------------
----------------------
----------------- -- -----------------
--------------
--
--
-------- ------------------------- --------------- ------ -
------ ------------------- -- -------
-
-------- ------------
----------- -------
---------------- ----------------
-------------- ------
-- --------------- - ------------------------ -
-- ------------ -
--- ---------------- - ------------------------- --
----------------------------------- -- ------- -----------
--
---------------- - ----------------------------------- -----------------
------ -----------------
- ---- -
------ ---
-
-
-------- ------------------------ ------- ----------- -------- ------- -
------ ---------------------------------------------------- --- --
-
-------- --------------------------- ---------------- -------------- ----------------- --------------- -
------ ------------------------- -- ------------------------------ ----------------
-
-------- ----------------------------- -------------- --------- ---------------- -
-- ---------- -- ---------------- -- --------------- --- -- -
------ ------
-
------ ---------------------- -- ---------------- --- --------------------------- - --
-
--
在上面的代码中，我们首先导入了 spfx-office-ui-fabric-people-picker 的几个组件，包括 NormalPeoplePicker 和 IBasePickerSuggestionsProps 等。然后，我们定义了一些示例数据，用于在人员选择器中展示。接着，我们创建了一个 React 函数组件 PeoplePicker，它是人员选择器的主要部分。在 PeoplePicker 中，我们声明了一个状态 people 和一个 setPeople 函数，用于保存和更新人员选择器中已选中的人员。
然后，我们返回了一个 NormalPeoplePicker 组件，并设置了一些必要属性，例如 onResolveSuggestions、getTextFromItem、pickerSuggestionsProps 等。这些属性的具体含义可以查看 npm 包的文档。通过调用 NormalPeoplePicker 组件的 onChange 属性，我们可以在用户选择人员时更新 people 状态。
最后，我们导出了 PeoplePicker 组件，可以在需要的地方进行使用。
总结
在本文中，我们介绍了一个非常实用的 npm 包 spfx-office-ui-fabric-people-picker，它能够方便地实现 Office UI Fabric 风格的人员选择器，而且还支持多种不同类型的人员选择器，非常好用。通过本文的介绍和示例代码，相信读者已经能够掌握如何使用 spfx-office-ui-fabric-people-picker 了。使用 spfx-office-ui-fabric-people-picker 能够让我们的开发更加高效，同时也能够提高我们的用户体验，非常值得尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a58ccae46eb111f16e