Question

我试图使我的WebPart响应节布局中的列宽。我通过调用

获得边界矩形的宽度

const width: number = this.domElement.getBoundingClientRect().width;

我的渲染功能如下：

public render(): void {
    const width: number = this.domElement.getBoundingClientRect().width;
    this.domElement.innerHTML = `<div>${width}</div>`;
}

将WebPart插入SharePoint工作台时，将显示数字736。但是，如果我将该节的布局从一列更改为其他列，则数字不会更改。

一旦布局（及其宽度）发生变化，我该怎么做才能触发渲染功能？

Answer 1

为此，您可以创建一个事件侦听器，并在函数中设置状态以重新呈现您的Web部件：

private handleWindowSizeChange() {
  this.setState({
    size: window.innerWidth
  });
}
public componentDidMount() {
   window.addEventListener('resize', this.handleWindowSizeChange.bind(this));
}
public componentWillUnmount() {
   window.removeEventListener('resize', this.handleWindowSizeChange.bind(this));
}

Answer 2

我已经使用ResizeObserver api来监听布局中的布局更改。

唯一的问题是IE，Edge和Safari不支持它。

public componentDidMount() {
    if(window.ResizeObserver) {
        this.resizeObserver = new ResizeObserver(this.handleResize);
        this.resizeObserver.observe(this.domElement)
    }
}
public componentWillUnmount() {
    if(window.ResizeObserver) {
        this.resizeObserver.disconnect()
    }
}

SPFx：如何在部分布局更改时重新呈现我的WebPart

2 个答案: