问题标签 [office-ui-fabric-react]

我有这个代码：

我有这个版本^7.93.1。
Snap to step 不起作用，甚至 typescript 报告snapToStepprop 不存在的错误

我正在创建一个 React 应用程序并使用Office Fabric UI React。

我使用 npm/yarn 导入了最新版本"office-ui-fabric-react": "7.94.0",。这是我的 TSX 文件，它没有产生预期的结果：

即使我使用了网格布局，组件也会垂直显示在彼此之上。我的期望是控件将水平布局，占据一列和十一列。

我正在office-ui-fabric-react中寻找一个Table组件，我可以在我的自定义 WebPart中使用它来显示来自 API 的一些数据，并且如果用户想要这样做，它可以很容易地导出到 Excel 工作表中。

我在这里看不到任何表格实现，这对我来说很奇怪，因为据我了解，Office UI Fabric 有点像“像在 Microsoft Office 中编辑一样编辑您的网站”，而 Microsoft Office 有一个表格：

https://developer.microsoft.com/en-us/fabric#/controls/web

我找到了这个例子，它使用简单的 HTML 元素来创建一个表格，但是在看了一会儿之后，Fabric JS 与 Fabric React 不同，我们使用的是后者：

https://developer.microsoft.com/en-us/fabric-js/components/table/table

经过一番挖掘，我实际上在 office-ui-fabric-react 中找到了这个表：

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/apps/fabric-website/src/components/Table/Table.tsx

但是我无法像这样导入它：

import { Table } from "office-ui-fabric-react"

经过一番挖掘，我在同一个 Github 存储库中找到了这个示例站点：

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/apps/fabric-website/src/pages/Styles/TypographyPage/TypographyPage.tsx

它使用表，并像这样导入它：

import { Table } from '@uifabric/example-app-base/lib/index2';

然后我能够安装这个 npm 包并从中使用 Table：

https://www.npmjs.com/package/@uifabric/example-app-base

然而，上面有一个免责声明：“这些组件主要用于 office-ui-fabric-react 存储库。因此，API 可能不稳定。”

所以我不确定这是否是解决这个问题的最佳方法，而且我也没有看到任何 Excel 导出功能。

1. 那里有一个组件可以满足我的需要吗？
2. 我必须从头开始编写自己的代码还是从我在 Github 上找到的表格代码开始？

我一直在尝试在 Fabric-React 中使用 GroupedList。如果可以帮助，我需要避免多行选择。即如果我选择一行，之前选择的行应该被取消选择。

这是分组列表：https ://developer.microsoft.com/en-us/fabric#/controls/web/groupedlist

我正在尝试渲染一个不太大的DetailsList（100-200 行之间的东西），其中我有一个带有CommandBar组件的自定义列。其中一项操作是删除行本身的删除操作。我面临的问题是，在我单击删除行后，代码花费了我期望重新渲染的更多时间，从而产生了系统缓慢的感觉。

在 dev 中运行时，我的性能非常缓慢，非常令人不快。（我的机器是 16GbRam 的 i7，所以问题不应该是我的机器）。

在生产中运行虽然我得到了“好的”性能，但不是我想要的出色性能。

代码示例：https ://codepen.io/pedro-beslogic/pen/eYNWLLo

我已经评论了这条线141以举例说明我认为出色的表现

反应分析器文件：https ://beslogic-my.sharepoint.com/:u:/p/pedro_ferreira/EQ-P0K6-uYZFqhPNIcMtbmsBNWU6CUXrQjuexCPhPkibpQ?e=JMjnoa

Chrome 性能文件：https ://beslogic-my.sharepoint.com/:u:/p/pedro_ferreira/EbogBtQwPWVCpwCrIIFfAdYBsOX1BlYB0cOWl7Zy1KwanA?e=Z53Qyi

我做错了什么还是让表格更高效的更好方法？

例如，在主包（office-ui-fabric-react）和日期时间包（安装为@uifabric/date-time）中有一个 DatePicker 和一个 Calendar 控件。这两个 API 似乎几乎相同，但在某些属性上有所不同。例如，在日历中，主包中缺少属性（在本期calendarDayProps中请求），但仅在日期时间包中可用。我只是通过搜索 github 问题才发现这一点，因为没有可用于 date-time 包的官方文档。可用的文档页面仅指主包版本。

另一方面，在已经关闭的问题中，没有提到此修复仅适用于日期时间包版本，好像这应该以某种方式清楚。我觉得我错过了一些信息。

那么这里有什么意义呢？日期时间包版本会在某个时间点取代主包版本吗？它们是否可以互换使用？为什么没有这方面的文件？我真的很困惑...

您好，我发现启用“自由格式”选项后，在字段内单击时，ComboBox 组件不会自动打开-我知道这是设计使然，但即使启用了自由格式，也有办法强制它打开-这是我的客户目前的要求。谢谢

参考https://developer.microsoft.com/en-us/fabric#/controls/web/contextualmenu中的 ContextualMenu 示例，我想将默认图标 (ChevronDown) 更改为 ChevronUp。我怎么做？我通过提供带有所需图标的样式变量尝试了一些选项，但尚未成功。关于如何做到这一点的任何想法？

在我的 React TypeScript 项目中，我正在动态创建多个输入控件，如 TextField、DatePicker、Checkbox、ComboBox 等......以 UI 等形式。单击提交时，我想获取每个输入控件的值。什么是有效的方法来做到这一点？我可以为每个控件设置一个 onChange 事件，但我想知道是否有更好的方法来做到这一点。

我正在尝试office-ui-fabric-react与我的项目一起使用。但是我在控制选择输入时卡住了。我想在 OnChange 事件中获取所选项目的值。但是没有value开event.target。这似乎div只有textContent. 我必须使用ref吗？但是当我使用时我并不高兴，ref因为我相信它不是反应方式。

库：https ://developer.microsoft.com/en-us/fabric#/controls/web/dropdown

1. 有没有不使用 ref 的解决方案？

2. 如果我必须使用 ref 我应该怎么做？