如何在 HTML 页面中呈现 FluentUI 控件，类似于在 Div 内的脚本标签中呈现 React 组件答案

【问题标题】：How to render FluentUI controls in a HTML page similar to rendering React Components in a script tag inside a Div如何在 HTML 页面中呈现 FluentUI 控件，类似于在 Div 内的脚本标签中呈现 React 组件
【发布时间】：2021-12-04 08:19:14
【问题描述】：

我有一个用于调用 Teams 任务模块的示例代码，其中一个打字稿文件正在 HTML 页面中呈现 - 示例的 github 链接：https://github.com/nanddeepn/code-samples/tree/master/MSTeams/task-modules-tab/YouTubePlayer_HTML_Page

有一个打字稿文件 (https://github.com/nanddeepn/code-samples/blob/master/MSTeams/task-modules-tab/YouTubePlayer_HTML_Page/src/app/scripts/youTubePlayer1Tab/VideoSelectorTaskModule.tsx)，他们能够在 html 页面中呈现内容 (https://github.com/nanddeepn/code-samples/blob/master/MSTeams/task-modules-tab/YouTubePlayer_HTML_Page/src/app/web/youTubePlayer1Tab/selector.html) 我无法理解他们如何能够在 HTML 页面中呈现打字稿。

我的最终目标是能够在 HTML 页面中呈现带有 FluentUI 控件的打字稿，这样我就可以将所需的所有控件添加到任务模块中。非常感谢任何帮助。

【问题讨论】：

请查看以下链接 - youtube.com/watch?v=8WVWirWYHE4、voitanos.io/blog/htwoo-microsoft-ux-alternative、dev.to/maxprogramming/…
请查看以下链接以使用 CDN 将流畅的 UI 添加到 HTML - github.com/microsoft/fluentui/tree/master/packages/…

标签： reactjs webpack microsoft-teams fluentui-react

【解决方案1】：

请使用下面的 CDN 链接在 HTML 页面中呈现 FluentUI 控件 - https://github.com/microsoft/fluentui/tree/master/packages/web-components#from-cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
  </head>
  <!-- ... -->
</html>

【讨论】：