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

React 16中的事件监听器和引用

1 个答案: