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

我正在尝试在 Office UI Fabric React 基本列表的每一行上做一个按钮。该按钮将基本上调用具有项目 ID 的函数。代码是这样的

但是单击图标按钮时，我不断收到以下错误。

如何将基本列表每一行中的按钮绑定到函数？

I have to handle click or change on inner elements in radio button (ChoiceGroup) in office-ui-fabric-react. In the below example, I want to click on the link but am not able to. As per my understanding, we can display the JSX element inside onRenderField of the option (of type IChoiceGroupOption). I am able to render correctly but not able to perform any action on that. Do I need to override the click of the radio button? How?

You can find the code on this codepen.

我正在尝试使用来自 UI Fabric 的 Microsoft 控件 PeoplePicker 在我的应用程序中获得 Office 感觉。我可以使用下拉菜单和按钮之类的控件，但是当我想使用 PeoplePicker 时，即使我什么也没做，我也会在代码中出错。

为了启动我的组件代码，我从https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker复制粘贴了 Normal People Picker ，我得到了两个错误（目前）。

1. 第 48:66 行：解析错误：意外的标记，预期的“，”，我的第 48 行是：
   return peopleList.filter(item => doesTextStartWith(item.text as string, filterText));
   指向item.text as string。我猜这个错误来自于as string在 JS 代码中的使用。当我将 all 替换as string为.toString()时，错误消失了。
2. 意外的令牌（26:79），我的第 26 行是:
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
   指向[].IPersonaProps

由于我从 Microsoft 获取代码，并且它无法在我的计算机上运行，​​我想我错过了一些东西。我期望得到与他们网站上的样本相同的结果。

我的 Node 模块中有office-ui-fabric-react。

这是我的代码：

我在我的应用程序中像这样使用它。我已经把<...>代码保持简短。本节一切正常。

FluentUI（又名 office-ui-fabric）有一个名为DragDropHelper的辅助类。不幸的是，没有任何文档，我真的不明白我应该如何使用它。

一个简短的例子将不胜感激。

我目前正在为 MS Teams 开发应用程序。在习惯了 MS UI 库（现在称为 fluent-ui）之后，一切都开始组装在一起。由于我想为我的用户提供“内置”体验，我想使用微软也使用的本地主题和样式。

作为基础，我使用@fluentui/react-northstar，这是官方支持的团队在这里查看。最好的是，它为船上的团队提供了内置主题。惊人的。

到目前为止，一切都很好。我还想显示一些列表，其中显示了当前登录用户的数据。为此，我想使用Shimmer-DetailsList。这里的问题是我无法应用来自@fluentui/react-northstar 的主题，这让我非常抓狂。有人知道我可以在这里做什么吗？这让我完全发疯，提供的 UI 彼此不兼容，或者我没有使用正确的方法。

如果需要，我也可以显示一些代码，但在这种状态下，我只是想理解。

非常感谢你们的帮助！

最好的，汤姆

更新： 好的可能会有点复杂，但我会尽力展示我的代码。我会缩短不必要的部分。代码是为 React 编写的。

Index.js 我在这里确定用户当前活动的主题，可以通过window.location.search. 然后主题也作为道具传递给 App.js。

App.js 在 App.js 中，我确定了一些通用的东西。我检查 Teams 是否可以对用户进行身份验证，以及用户是否在首次使用时接受了 TOU（针对我的 API 进行查询）。如果一切正常，我会渲染一个名为 content 的自定义组件，我还将主题作为道具传递。我会留下一般的函数声明，因为它们目前没有引起问题。

Content.js 在内容中，我确定页面布局的一般内容。

Layout.js处理页面的一般布局。目前这并不理想，因为我仍在学习，但这可以稍后完成。

ToolbarMenu.js提供了一个工具栏供用户交互或创建一些内容。但是还没有功能。

List.tsx应为用户内容提供详细信息列表。这是当前问题所在。代码基本上是 MS这里的示例： . 除了我尝试在不起作用的列表中使用 Index.js 中的主题。

为了更好地理解：微软表示这个包（fluentui/react-northstar）最适合团队支持，因为它拥有一切，并且还集成了团队主题，但它没有提供作为 office-ui-react 的详细信息列表（应该在事实上几乎相同的库？）而且它们彼此也不兼容？

我不知道我做错了什么，如果可能的话，我宁愿不定义自己的主题，也不愿使用已有的主题。

我有一个用例，其中我有一个包含搜索框、一些消息框和两个列表的侧面板，当用户搜索某些内容时，这些列表会被过滤。

搜索框和消息框占据固定高度，但如果浏览器调整大小，我希望两个列表占据相同的高度并增长。

如果其中一个列表中的项目较少以便为另一个列表提供更多空间，那么缩小列表也很不错。

这是用户界面的样子......

我目前正在尝试在浏览器调整大小事件中手动计算高度并将高度分配给两个列表，但我想知道是否有更好的方法来做到这一点。

提前致谢 ：）

我试图让我的文本环绕并显示在 Office UI Fabric 的 DetailsRow 中的多行中。目前我的一些有长文本的行离开了屏幕，我希望它们环绕，这样用户就不必滚动阅读整行。

这是我的分组列表

这是我对每个单元格的渲染方法。

关于如何使文本换行的任何想法？在造型方面，我是初学者。

我从自定义组件@uifabric/azure-themes或@uifabric/theme-samples通过自定义组件应用主题。

@uifabric/styling但是，一旦我更改了主题，我注意到自定义组件设置的主题颜色与从's检索到的颜色不匹配getTheme()。

一旦自定义组件（设置在我的反应树顶部）设置为新主题，它们不应该匹配吗？所有的织物反应成分似乎都正确地改变了颜色。

我正在开发 Azure DevOps 扩展，主要使用来自 azure-devops-ui（Forumula 设计系统）的组件，它自动从用户设置中获取主题。我还使用了来自 FluentUI（以前的 office-ui-fabric-react）的一些组件，但我也在努力让它们也使用主题。例如。当切换到深色主题时，FluenUI 组件保持白色。

有人做过这项工作吗？

我是否必须手动指定所有样式？但是如何获取当前 DevOps 主题用户正在使用的信息呢？

如何从 office UI 结构中获取有效的 IconNames 列表。我正在尝试为 spfx webpart 创建一个图标选择器。我已经尝试从 @uiFabric/icons 导入 IconNames ： import{IconNames} from "@uifabric/icons" 但我收到一个错误：不推荐使用 const 枚举。

谢谢罗素