主页 / 问题 / 1199388
Accepted
stiv
Asked:2021-11-03 17:54:53 +0000 UTC2021-11-03 17:54:53 +0000 UTC

动态计算 div 高度 React

  • 772

设置 css 属性，使块拉伸到屏幕高度的其余部分

flex-grow: 1

现在我不知道如何在调整窗口大小时动态计算高度。到目前为止，在 componentDidMount 中组件渲染后只设置了高度

演示 https://codesandbox.io/s/dynamic-calc-height-4t1zv?file=/src/Tile.js:163-180

代码示例

class Help extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      elementHeight: 0
    };
  }

  componentDidMount() {
    this.setState({ elementHeight: this.divRef.clientHeight });
  }

  render() {
    return (
      <div className="tile" ref={(element) => (this.divRef = element)}>
        Div height: {this.state.elementHeight + " px"}
      </div>
    );
  }
}
javascript

1 个回答

  1. Best Answer
    import React from "react";

class Help extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      elementHeight: 0
    };
    this.divRef = React.createRef();
  }

  resizeHandler = ()=>{
    this.setState({ elementHeight: this.divRef.current.clientHeight });
  }

  componentDidMount() {
    this.resizeHandler();
    window.addEventListener('resize',this.resizeHandler);
  }

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

  render() {
    return (
      <div className="tile" ref={this.divRef}>
        Div height: {this.state.elementHeight + " px"}
      </div>
    );
  }
}

export default Help;
    • 1

相关问题