将 Bootstrap 添加到 SPFx Web 部件

我们有一个 SPFx web 部件，展示了如何将 React ‘思考’教程 与 SPFx 教程集成，但它看起来非常糟糕。

我们需要让它看起来更好，我们将通过使用 Bootstrap 来实现这一点。

为了做到这一点，我们可以按照 SPFx 框架教程中的说明进行操作：将 jQueryUI 手风琴添加到 SharePoint 客户端 Web 部件。

首先，我们需要添加对从 CDN 动态加载文件的支持。这属于我们代码的“管道”部分，因为实际的“执行”部分不应该关心 CSS 是如何提供的。因此，在 *ThinkingWebPart.ts* 中，添加以下行

import importableModuleLoader from '@microsoft/sp-module-loader';

这使我们可以访问动态模块加载器，以便我们可以提取外部内容。

我们应该从哪里提取它？显而易见的选择是

• 从当前的 SharePoint 根站点，例如 *站点资产* 文件夹。
  • 好处在于意味着没有传递任何安全边界
  • 但是，这很棘手，因为 SharePoint 需要服务器相对 URL 才能获取它，我们可以从 _spConfigInfo 派生它
  • 此外，我们需要文件的多个副本，每个站点集一个
• 从 SharePoint 租户的根站点。
  • 好处在于每个租户只有一个文件副本
  • 坏处在于传递了安全边界
  • 此外，坏处是我们必须向每个人授予对此站点的访问权限，这可能会允许一个站点集的成员查看另一个站点集中的成员。
• 从外部位置，内容分发网络 (CDN)
  • 好处在于所有租户只有一个文件副本
  • 坏处在于传递了安全边界
  • 更糟糕的是，租户是链接的
  • 更好的是，浏览器可以缓存该文件，因此在第一页之后会更快。

没有实际的答案，但为了我们的目的，我们将使用 CDN，因为这是一个演示。在实践中，我可能会使用 CDN，但可能会考虑托管我自己的私有 CDN，以便我可以控制其上的内容。

因此，将以下内容添加到 *ThinkingWebPart.tsc*

public constructor(context: IWebPartContext) {
super(context);

importableModuleLoader.loadCss
(‘https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css’);
}

然后使用以下命令编译

gulp serve

这将失败并显示以下错误消息

Error – typescript – node_modules\@microsoft\sp-module-loader\lib\SPModuleLoader.d.ts(1,28): 
error TS2307: Cannot find module ‘combokeys’.

Error – typescript – node_modules\@microsoft\sp-module-loader\lib\importableSpModuleLoader.d.ts(1,28): 
error TS2307: Cannot find module ‘combokeys’.

不用担心。这是由于未安装正确的类型定义。

根据 SPFx 教程，您只需运行

tsd install combokeys --save

这将使您获得一个正在运行的 Web 部件，该 Web 部件动态加载 Bootstrap CSS。

但是，我们需要更多，我们需要 jQuery 库来添加功能。

然而，这不一定是好主意，因为 jQuery 和 React 在很大程度上重叠，并且有一些优秀的人在 React 中实现了 BootStrap。我们将改用这个。

npm install react-bootstrap --save

现在，我们有可用的 bootstrap，但我们仍然需要告诉我们的项目有关它的信息。

• 安装它的类型定义文件

  typings install dt~react-bootstrap –save –global

• 在 *package.json* 中，确保以下内容是“dependencies”的一部分

  “react-bootstrap”: “^0.30.3”,

• 在 *config/config.json* 中，确保以下内容是“externals”的一部分

  “react-bootstrap”: “node_modules/react-bootstrap/dist/react-bootstrap.min.js”

现在我们可以对 *FilterableProductTable.ts* 进行所需的更改，以引用 react-bootstrap 组件。

这涉及很多内容，因此我建议您从 GitHub 中提取正确的版本。

git checkout tags/v1.1

亮点是

• React-Bootstrap 和 ES6 并不是很自然地配合，你需要使用 .bind(this) 而不是 => 语法。
• 您需要使用 受控组件 而不是 React 思考中使用的不受控组件。

所以试一试，看看你的想法。

祝好！

归档于： CodeProject, 开发, Office 365, SharePoint 2016, 未分类