问题标签 [fluentui-react]

我正在按照教程在 React 中使用 fluentui 构建仪表板，然后将对其进行自定义和更改。但是，我完全按照教程进行操作，没有出现任何错误，但由于某种原因，卡片和表格出现在屏幕底部，看起来不像它们的样式，并且表格中没有数据。

我的代码与此处的教程完全相同：https ://www.youtube.com/watch?v=P9s6dsdu_9c 。我将在下面发布一个屏幕截图，说明我的 atm 外观以及下面的所有相关代码。

代码：App.js

导航.js

Card.js

表.js

我目前正在尝试借助 FluentUI/react-northstar Dropdown 组件制作下拉菜单。不幸的是items，该组件的道具在下拉列表中只有一个string[]用于呈现名称的，但我也需要一个key。

我试图通过使用renderItem添加自定义渲染器来实现这一点：

该dropDownMapper函数返回一个对象数组，如下所示：[{key: string, name: string}, ...]

有了这个，我可以在我的下拉菜单中呈现正确的项目，但我无法与它们进行交互。我尝试添加onClickto <Component/>，但是由于我使用了框架，因此我不确定<Dropdown/>单击该项目时期望我做什么，并且文档并没有真正的帮助。

我正在为 gatsby.js 使用 Microsoft 的 fluent ui starter kit。如果我使用 gatsby Link 组件，那么我不会得到 FluentUI 的样式。但是如果我使用 fluentui Link 组件，我不会得到 gatsby 链接组件的行为，它链接到 gatsby 站点内的其他页面。IE

我想用这个：

如果我使用这个，我会得到的样式：

如何使用 FluentUI Link 样式获得 gatsby 链接功能？

是否有任何关于如何将样式自定义应用于新按钮的文档？使用 IButtonStyles 接口的样式在新按钮上被破坏，如下面的代码所示。

我正在尝试使用流利的 ui 中的 tagPicker。我使用站点中的示例作为起点： https ://developer.microsoft.com/en-us/fluentui#/controls/web/pickers

问题是我拥有的对象有 3 个道具。数组中的对象是 {Code:'string', Title:'string', Category:'string'}。我正在使用具有使用效果的状态来获取数据。到目前为止工作正常，问题是建议被渲染为空白。它过滤项目但不显示我想要的道具。

这是我的代码：

我正在使用 TagPicker 动态获取数据并呈现一组与该术语匹配的结果。问题是查看文档没有明确的指示如何确定组件数据正在加载或搜索。删除了这些的界面（ISuggestionsProps）并且 loadingText 道具似乎对我不起作用，或者我可能使用错误。

以下是我如何将列表中的数据加载到标签选择器中：

代码笔： https ://codepen.io/deleite/pen/MWjBMjY ?editors=1111

这显然有很多问题，首先也是最糟糕的，每次击键都是一个 Promise 被触发。那么，问题是如何使用搜索词调用 api 并产生建议？

谢谢你们。

我正在使用 fluentui/react-northstar v0.51.4 为 MS Teams 开发自定义选项卡

我需要有一个能够对表进行排序、过滤和分页的表。

我无法找到相同的任何细节。

如果你能提供一个更有用的演示。

谢谢

我有一个自定义挂钩，可以根据 url 从缓存 api 获取文件数据。钩子工作正常。

问题是我得到了回复，我需要先解析这些数据，然后才能使用结构标签选择器。而且我也只想在用户开始输入时解析该数据。我知道道具“filterSuggestedTags”接受像 call 这样的承诺，我们可以在此之前获取数据。

您会看到我在 filterSuggestedTags 中使用了 fetch，并确保在显示结果之前从 url 中获取数据，此外它还显示了加载器： https ://codepen.io/deleite/pen/MWjBMjY?editors =1111

因此，鉴于下面的代码以及我的 useCache 将我的 fetch 响应作为状态的事实：

我创建了一个包含两列的页面：

1. 在一列中的想法是显示项目列表
2. 在另一列中，我应该显示一些与所选项目相关的信息

我到目前为止的代码是：

如您所见，我有一个根状态，它将用于驱动从第一列内部触发的第二列的更新。但它不起作用。当我单击一个项目时，第一列中的整个组件正在重新渲染，而它应该只更改所选项目。

请在此处找到CodeSandbox。

在我的 React 应用程序中，我使用 react-fluent-ui 来处理很多样式。在我的基于类的组件的一个块中，我使用了TextField一个过滤器元素。我还在其中包含了一个clear图标，TextField以便用户可以单击它来清除输入字段中的文本。我遇到的一个问题是如何在图标所在的代码块中包含对函数的引用。请注意，onClick需要专门在图标上，而不是在TextField. 这是代码块：

上面引用的iconProps内容如下所示：

当我尝试将函数添加到clearIconProps使用胖箭头语法时，像这样，出现语法错误：（解析错误：意外标记）：

我也试过这个，但它也会导致语法错误：（解析错误：意外令牌）：

为了记录，目前，clearFilter()看起来像这样：

如何将功能添加到 中的图标TextField？