SPFx: как сделать заново мой WebPart при изменении макета раздела

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>`;
}

Когда я вставляю свою веб-часть в рабочую среду SharePoint, число 736 равнопоказано на рисунке. Однако, если я изменю макет раздела с одного столбца на другой, число не изменится.

Что мне нужно сделать, чтобы вызвать функцию рендеринга, как только макет (и для этогоширина) меняется?

Answer 1

Для этого вы можете создать прослушиватель событий и в своей функции установить состояние для повторной визуализации веб-части:

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));
}