介绍
在前端开发过程中，我们经常会使用到 UI 库来构建页面。其中，office-ui-fabric-react 是一个基于 React 的 UI 库，提供了一些微软 Office 风格的 UI 组件，例如按钮、表格、对话框等。这个库提供了一些简洁易用的组件，帮助我们快速构建美观的界面。
在本篇文章中，我们将介绍如何使用 npm 包 office-ui-fabric-react，包括安装、引入、使用方法和示例代码等内容。
安装
使用 npm 安装 office-ui-fabric-react：
npm install office-ui-fabric-react
引入
在你的 React 项目中，你需要在代码的开头先引入这个库：
import { Button, ChoiceGroup, Dialog } from 'office-ui-fabric-react';这个例子中，我们引入了三个组件：Button、ChoiceGroup 和 Dialog。你可以根据自己的需要引入不同的组件。
使用方法
Button 组件
Button 组件用于创建按钮。在 JSX 中，你可以这样调用它：
return (
<Button onClick={this.handleClick}>Click me</Button>
);其中，onClick 属性指定了点击按钮时执行的函数。Button 组件还提供了一些其他属性，例如 primary、disabled 和 className 等。你可以参考官方文档了解更多信息。
ChoiceGroup 组件
ChoiceGroup 组件用于创建一组单选或多选框。在 JSX 中，你可以这样调用它：
<ChoiceGroup
options={[
{ key: 'A', text: 'Option A' },
{ key: 'B', text: 'Option B' }
]}
onChange={this.handleChange}
defaultSelectedKey='A'
/>其中，options 属性指定了选项，onChange 属性指定了选择选项时执行的函数，defaultSelectedKey 属性指定了默认选中的选项。你可以根据需要修改这些属性。
Dialog 组件
Dialog 组件用于创建对话框。在 JSX 中，你可以这样调用它：
-- -------------------- ---- -------
-------
------------------------------
---------------------
------ ------- -------
-------- ------- --------
--
-------------
----------- ------
------- - ----- - --------- --- - -
---
--------------
-------------- ---------------------------------------------
-------------- -------------------------------------------------
---------------
---------其中，hidden 属性指定了对话框是否可见，dialogContentProps 属性指定了对话框的标题和子文本，modalProps 属性指定了对话框的一些样式和行为。Dialog 组件还包括了 DialogFooter 和一些按钮组件，用来展示对话框底部的按钮。你可以根据需要修改这些属性和内容。
示例代码
一个完整的示例代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- ------------ ------- ------------- -------------- ------------- - ---- -------------------------
----- ---------------- ------- --------- -
------------------ -
-------------
---------- - -
----------- ----
--
---------------- - ----------------------------
----------------- - -----------------------------
---------------- - ----------------------------
-
------------- -
--------------- ----------- ----- ---
-
--------------- ------- -
--------------------- ------ ---- ----------------
-
------------- -
--------------- ----------- ---- ---
-
-------- -
------ -
-----
------- -------------------------------- -----------
------------
----------
- ---- ---- ----- ------- -- --
- ---- ---- ----- ------- -- -
--
----------------------------
----------------------
--
-------
------------------------------
---------------------
------ ------- -------
-------- ------- --------
--
-------------
----------- ------
------- - ----- - --------- --- - -
---
--------------
-------------- ---------------------------------------------
-------------- -------------------------------------------------
---------------
---------
------
--
-
-
------ ------- -----------------在这个示例代码中，我们创建了一个包含 Button、ChoiceGroup 和 Dialog 组件的 ExampleComponent 类。其中，handleClick、handleChange 和 handleClose 函数分别用于处理按钮点击、ChoiceGroup 选中和对话框关闭事件。你可以通过修改这些函数来自定义组件的行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-office-ui-fabric-react