Слушатели и реферы событий в React 16

Question

У меня есть элемент, ширина которого я хочу установить равным родительскому элементу как при визуализации элемента, так и при изменении размера родительского элемента. Я использую новый React.createRef API для достижения этой цели и в настоящее время имею следующее:

class Footer extends Component {
  constructor(props) {
    super(props);
    this.footerRef = React.createRef();
    this.state = { width: 0 };
  }

  updateWidth() {
    const width = this.footerRef.current.parentNode.clientWidth;
    this.setState({ width });
  }

  componentDidMount() {
    this.updateWidth();
    this.footerRef.current.addEventListener("resize", this.updateWidth);
  }

  componentWillUnmount() {
    this.footerRef.current.removeEventListener("resize", this.updateWidth);
  }

  render() {
    const { light, setEqualToParentWidth, className, ...props } = this.props;

    const style = setEqualToParentWidth
      ? { ...props.style, width: this.state.width }
      : { ...props.style };

    return (
      <footer
        {...props}
        ref={this.footerRef}
        style={style}
        data-ut="footer"
      />
    );
  }
}

Это, кажется, компилируется без каких-либо ошибок и точно определяет размеры при монтировании. Однако после установки изменение ширины области просмотра не меняет ширину нижнего колонтитула. Я неправильно подключаю прослушиватель событий?

Первоначально я также пытался подключить прослушиватель событий к window, но это привело к TypeError: Cannot read property 'current' of undefined в первой строке updateWidth, когда я попытался изменить размер моего экрана.

Как я могу это исправить?

Answer 1

Вам необходимо использовать окно resize событие.Когда вы назначаете прослушиватель событий, вам нужно привязать к нужной области видимости внутри вашего конструктора this.updateWidth = this.updateWidth.bind(this);

Это также должно быть опровергнуто.

Попробуйте это:

class FooterBase extends Component {
  constructor(props) {
    super(props);
    this.footerRef = React.createRef();
    this.updateWidth = this.updateWidth.bind(this);
    this.state = { width: 0 };
  }

  updateWidth() {
    const width = this.footerRef.current.parentNode.clientWidth;
    this.setState({ width });
  }

  componentDidMount() {
    this.updateWidth();

    window.addEventListener('resize', this.updateWidth);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWidth);
  }

  render() {
    const { light, setEqualToParentWidth, className, ...props } = this.props;

    const style = setEqualToParentWidth
      ? { ...props.style, width: this.state.width }
      : { ...props.style };

    return (
      <footer
        {...props}
        ref={this.footerRef}
        style={style}
        data-ut="footer"
      ></footer>
    );
  }
}

DEMO