确定呈现的 Web 部件大小

有时，出于各种原因，自定义SharePoint 框架 (SPFx) 应用程序需要知道 Web 部件的呈现大小。 在不同设备（如桌面或移动浏览器）上查看 Web 部件时，此值可能会更改。

Web 部件的呈现大小也可能取决于 Web 部件在页面上的位置。 如果 Web 部件用作 单个部件应用页面，它可以是一个大小，但如果也用作 Web 部件呈现在只有一列或多列的页面布局中，则它可以以完全不同的大小呈现。

Web 部件的功能可能因呈现的 Web 部件的大小而异。

在 SPFx v1.12 版本中引入，开发人员可以确定呈现的 Web 部件的宽度。 以前，可靠地确定此值的唯一方法是通过不支持的方法，例如检查页面 DOM。

获取呈现的 Web 部件宽度

width Web 部件类上的 属性以数字形式返回 Web 部件的当前呈现宽度。 Web 部件应利用此属性来执行操作，例如基于 Web 部件的初始可用宽度设置组件的任何条件样式。

public render(): void {
  this.domElement.innerHTML = `
    <div class="${ styles.helloWorld }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <p class="${ styles.description }">Web Part width: ${this.width}</p>
          </div>
        </div>
      </div>
    </div>`;
}

检测 Web 部件宽度何时更改

开发人员还可以通过处理事件来确定 Web 部件呈现的宽度何时发生变化：

protected onAfterResize(newWidth: number): void;

当 Web 部件容器 DOM 元素宽度发生更改时（例如，在调整浏览器窗口大小和打开/关闭属性窗格时）时，将调用此 API。

Web 部件应利用此方法来执行操作，例如，根据 Web 部件的新可用宽度可能重新呈现组件。

protected onAfterResize(newWidth: number) {
  console.log(`the new width of the web part is ${newWidth}`);
}